input中的range類型如何支持漢字

最近工作上需要用到滑塊這個東西來表示一些東西，效果如下：

但是試了一些框架裏自帶的range並不支持漢字。都是對數字敏感，效果如下：

如果想要實現第一種效果，首先需要導入外部js和css。

<!--Plugin CSS file with desired skin-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/css/ion.rangeSlider.min.css" />

<!--jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--Plugin JavaScript file-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js"></script>

再在適當的位置加一個接收range選擇的值

<label class="form-label text-dark mb-0">收入情況(月)</label>
<input id="income-range" type="hidden" value="" class="irs-hidden-input" tabindex="-1" readonly="">

最後js執行模塊

<script>
    $("#income-range").ionRangeSlider({
    grid: true,
    from: 5,
    values: [
    "0", "2k", "4k", "6k", "8k", "10k","12k","15k","20k","25k","30k","40k"
    ]
    });
</script>

這樣就實現了第一種的效果，如果需要改爲漢字，將values中的值改爲漢字即可。
他有一些默認的樣式，如果你不喜歡，可以對它進行重寫。

參數說明