如何将无序链接列表转换为范围滑块？

Question

我有一个无序列表，每个列表中都包含链接。每个链接都会向网站网址添加一个过滤器，并根据该值过滤产品。

         <ul class="layered-nav-list">
            <li class="layered-nav-list-item"> <a href="categories/all/?filter_milligrams=100mg">100mg</a> </li>
            <li class="layered-nav-list-item"> <a href="categories/all/?filter_milligrams=250mg">250mg</a> </li>
            <li class="layered-nav-list-item"> <a href="categories/all/?filter_milligrams=20mg">20mg</a> </li>
            <li class="layered-nav-list-item"> <a href="categories/all/?filter_milligrams=25mg">25mg</a> </li>
            <li class="layered-nav-list-item"> <a href="categories/all/?filter_milligrams=50mg">50mg</a> </li>
            <li class="layered-nav-list-item"> <a href="categories/all/?filter_milligrams=500mg">500mg</a> </li>
            <li class="layered-nav-list-item"> <a href="categories/all/?filter_milligrams=550mg">550mg</a> </li>
            <li class="layered-nav-list-item"> <a href="categories/all/?filter_milligrams=750mg">750mg</a> </li>
            <li class="layered-nav-list-item"> <a href="categories/all/?filter_milligrams=1000mg">1000mg</a> </li>
            <li class="layered-nav-list-item"> <a href="categories/all/?filter_milligrams=1500mg">1500mg</a> </li>
         </ul>

我想将此列表变成一个范围滑块。 例如：

我的主要问题是在这种情况下我无法编辑html 。我发现的每个jQuery范围滑块解决方案都不会将现有列表或输入转换为范围滑块。是否可以使用jQuery将这个无序列表转换为带有过滤器按钮的范围滑块？我最好的方法是什么？

感谢您的帮助。