Question

我正在尝试为Web托管网站创建一个jquery范围滑块，当范围滑块根据值移动时，该滑块将更改span元素的内容。因此对于不同的值，span元素上的不同内容。根据我在互联网上发现的内容，我看到很多范围滑块的例子，当它们被滑动时显示出价值本身，但我需要的是一个显示完全不同内容的滑块。我为这个范围滑块使用了基础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滑块的示例 fiddle

 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();

            }
}
);

Jquery范围滑块，用于在值更改时更改span元素的内容

2 个答案: