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