1

我相当 javascript 和 jquery。我正在尝试向我的网页添加一个滑块。这是一个基本滑块，任何人都可以在其中选择 0-100 之间的值。我不确定如何在中间标记一些间隔。

这是我到目前为止的代码

  <script>
    $(function() {
    var temp = 0;
        $( "#slider" ).slider({
            animate: true,
            value:temp,
            min: 0,
            max: 100,
            step: 1,
            slide: function( event, ui ) {
                $( "#amount" ).val(ui.value );
            },
            stop: function(event, ui) {          
                temp = ui.value;
                //Do something
            }
        });
        $( "#amount" ).val($( "#slider" ).slider( "value" ) );
    });
    </script>

它运行正常。我想做的是在 0.25、50、75 和 100 处添加间隔标记。

我已经解决了一些关于 SO 的问题，但不确定如何继续实施。将不胜感激。

我尝试了这个实现： http: //jsbin.com/iwime但这不是我想要做的，因为我只是希望刻度以这些定期间隔出现，但用户应该能够选择其他值。

谢谢干杯

4

2 回答 2

0

与此 SO 问题类似：Bijan 的回答可能会有所帮助。

他建议的 jQuery UI 滑块的实现可能会帮助您找到解决方案： http ://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/

于 2012-09-26T22:54:24.517 回答
0

我猜你想要这样的东西：http: //jsbin.com/iwime/116

因此，您无需使用滑块选项中的刻度数，而是使用max您想要提供的任何最大单位，例如 100。然后在 中refershTicks()，更新算法以切换类。

滑块设置：

    var slider = $("#slider").slider({
        ...
        max: 100,     // the only change
        ...
    });

和refreshTicks()方法：

    function refreshTicks() {
        var s = slider
            , lo = s.slider("values", 0), hi = s.slider("values", 1);
        var max = s.slider('option', 'max');
        s.find(".tick").each(function(i) {
            var i = (i + 1) * (max/ticks.length) - (max/ticks.length)/2;   // the updated algorithm
            var inRange = (i >= lo && i < hi);
            $(this)
                [(inRange ? 'add' : 'remove') + 'Class']("ui-widget-header")
                [(inRange ? 'remove' : 'add') + 'Class']("ui-widget-content");
        });
    }
于 2012-09-24T23:20:28.510 回答