jQuery范围滑块，当值更改时更改span元素的内容

Question

我正在尝试为虚拟主机网站制作一个jquery范围滑块，当范围滑块根据值移动时，它将更改span元素的内容。 因此对于不同的值，span元素上的内容不同。 从我在Internet上找到的内容中，我看到了很多范围滑块的示例，它们在滑动时显示值本身，但是我需要的是一个显示完全不同内容的滑块。 我将基础6类用于此范围滑块。 请帮我。

 <div class="range-slider round slidsec" data-slider data-options="step: 20;"><span class="slider-handle justr"  data-slider-handle role="slider" tabindex="1">
       <img class="sliderhandl" src="slider-handle-small.png">
       </span><span class="slider-fill fillsect" data-slider-fill></span>

</div>

我不会发布任何jQuery代码，因为我无法真正写出可以更改span元素的内容以获得不同值的部分，例如

slide:function( event, ui ) {
   if (ui.value < 33)

这已经花了我几天的时间，我正在尝试做到这一点： http : //imgur.com/a/Cu7qH 。 我需要6个步骤来制定计划。 我唯一有问题的是，当滑块处于不同计划时，我希望每月价格发生变化。

Answer 1

不能完全确定您要查找的内容，但是这里有一些不足。.至少您的标题要求的是。

HTML

<div id="slider"></div>
<span id="value">test</span>

使用Javascript

$(function() {
    $('#slider').slider({
        range: "max",
        min: 100,
        max: 1000,
        value: 600,
        step: 20,
        slide: function(event, ui) {
            $('#value').text(ui.value);
        }
    });
    $('#value').text($('#slider').slider('value'));
});

https://jsfiddle.net/nkqryqLd/

Answer 2

一个带有jQuery UI滑块小提琴的示例

 var valMap = [1,2,3,4];
$("#slider").slider(
{
           max: valMap.length - 1, 
           min: 0,
           values: [0],
           slide: function( event, ui ) {
             $("#resolution").val(valMap[ui.values[0]]);
             $('span').hide();
             $('span').filter('[data-n="'+ui.value+'"]').show();

            }
}
);