在一个滑块中创建多个范围滑动手柄

I am trying to add multiple handles to a jQuery UI slider widget, as in 2 or 3 or more range sliders in one slider.

我正在尝试向jQuery UI滑块小部件添加多个句柄,如在一个滑块中的2个或3个或更多范围滑块中。

I have tried searching on google and found an article that shows how to modify it to have multiple handles but I need them to work as range sliders.

我试过在谷歌搜索并找到一篇文章,展示如何修改它有多个句柄,但我需要它们作为范围滑块。

Is there anyway to make this work?

反正有没有让这项工作?

$("#slider-range").slider({
    range: true,
    min: 0,
    max: 1439,
    values: [540, 1020],
    animate: true,
    slide: slideTime
});

Thanks

6 个解决方案

#1

Take a look at colResizable jQuery plugin. It allows you to resize table columns and also to create multiple range sliders:

看一下colResizable jQuery插件。它允许您调整表列的大小,还可以创建多个范围滑块:

#2

colResizable is fine and all, but if you're looking for something a bit more modern, I wrote Elessar to fill this exact niche.

colResizable很好,所有,但如果你正在寻找更现代的东西,我写了Elessar来填补这个确切的利基。

在一个滑块中创建多个范围滑动手柄

#3

This is a wrapper that extends jquery-ui slider functionality and allows to build multi-range slider http://jsfiddle.net/ladrower/BmQq4/

这是一个扩展jquery-ui滑块功能的包装器,允许构建多范围滑块http://jsfiddle.net/ladrower/BmQq4/

It is easy to use. Just pass the selector of DOM element that will contain a multi-range slider.

它很容易使用。只需传递包含多范围滑块的DOM元素的选择器。

<html>
    <div id="slider"></div>
</html>

<script>
    var intervals = new Intervals("#slider");
</script>

Please, check out the documentation and sources at GitHub https://github.com/ladrower/jquery-ui-intervals

请查看GitHub上的文档和来源https://github.com/ladrower/jquery-ui-intervals

#4

I did edit.

我做了编辑。

You can look to http://jsfiddle.net/q5WEe/1/

你可以看看http://jsfiddle.net/q5WEe/1/

I did edit line 70 to 82.

我编辑了70到82行。

            /*edit
            if ( o.values.length && o.values.length !== 2 ) {
                o.values = [ o.values[0], o.values[0] ];
            }*/
        }
        /*edit
        this.range = $( "<div></div>" )
            .appendTo( this.element )
            .addClass( "ui-slider-range" +
            // note: this isn't the most fittingly semantic framework class for this element,
            // but worked best visually with a variety of themes
            " ui-widget-header" +
            ( ( o.range === "min" || o.range === "max" ) ? " ui-slider-range-" + o.range : "" ) );*/

#5

colresizable wasn't right for me, as that was geared more towards tables, I really preferred to use the jquery UI widget, slider. It looked like the source code could easily handle multiple handles, they just hadn't really built 'adding' or 'removing' handles live as a feature. So I just added to the source code of jquery UI Slider (a bit scary...I know) but works pretty well.

colresizable不适合我,因为它更倾向于表,我真的更喜欢使用jquery UI小部件,滑块。看起来源代码可以轻松处理多个句柄,他们只是没有真正构建“添加”或“删除”句柄作为一个功能。所以我刚刚添加到jquery UI Slider的源代码中(有点吓人......我知道)但效果很好。

var slider = $.widget("ui.slider", $.ui.mouse, {
    version: "1.11.4",
    widgetEventPrefix: "slide",
    //...
    value: function(newValue) {
        // ...
    },

    values: function(index, newValue) {
        // ...
    },

    //new function to allow creation of handles
    //you can add your own code to handle arguments or something for placing
    //the new handle in a specific spot
    addHandle: function() {
            //adds a new handle 
            this.options.values.push(this._trimAlignValue((this._valueMax() - this._valueMin()) / 2));
            this._refresh();
    },

    //new function to allow deleting handles
    //currently just takes the last value off, but you can make it fancier
    removeHandle: function() {
        //only remove a handle if there are more than 1 handles 
        if (this.options.values.length > 1) {
            this.options.values.pop();
            this._refresh();
        }
    },
   //...
 }

Then, when you want to call these functions, you do it like so

然后,当你想调用这些函数时,就这样做了

//when your 'add handle' button is clicked
$("#btn-add").click(function(){ 
    //call the add handle function you made within the slider widget
    $( "#slider" ).slider("addHandle"); 
});

$("#btn-remove").click(function(){
    $( "#slider" ).slider("removeHandle");
});

#6

If you don't insist on jQuery UI, also noUiSlider has this capability and is highly customizable. It can't tell you the ranges rightaway, but you can get them easily from counting with handles, min and max like this:

如果您不坚持jQuery UI,noUiSlider也具有此功能并且可高度自定义。它无法立即告诉你范围,但是你可以通过手柄,min和max计数来轻松获得它们,如下所示:

//get array of connect elements (ranges)
var connect = multirange.querySelectorAll('.noUi-connect');

multirange.noUiSlider.on('update', function () {
 var valuesarr = multirange.noUiSlider.get(),
 max = multirange.noUiSlider.options.range.max[0],
 oldsum = multirange.noUiSlider.options.range.min[0];// = slider min, will be usually 0

 for ( var i = 0; i < connect.length; i++ ) {
     if(valuesarr[i]) $(connect[i]).text(valuesarr[i] - oldsum);
     else $(connect[i]).text(max - oldsum);
     oldsum=valuesarr[i];
 }
});

see fiddle!

#1

Take a look at colResizable jQuery plugin. It allows you to resize table columns and also to create multiple range sliders:

看一下colResizable jQuery插件。它允许您调整表列的大小,还可以创建多个范围滑块:

#2

colResizable is fine and all, but if you're looking for something a bit more modern, I wrote Elessar to fill this exact niche.

colResizable很好,所有,但如果你正在寻找更现代的东西,我写了Elessar来填补这个确切的利基。

在一个滑块中创建多个范围滑动手柄

#3

This is a wrapper that extends jquery-ui slider functionality and allows to build multi-range slider http://jsfiddle.net/ladrower/BmQq4/

这是一个扩展jquery-ui滑块功能的包装器,允许构建多范围滑块http://jsfiddle.net/ladrower/BmQq4/

It is easy to use. Just pass the selector of DOM element that will contain a multi-range slider.

它很容易使用。只需传递包含多范围滑块的DOM元素的选择器。

<html>
    <div id="slider"></div>
</html>

<script>
    var intervals = new Intervals("#slider");
</script>

Please, check out the documentation and sources at GitHub https://github.com/ladrower/jquery-ui-intervals

请查看GitHub上的文档和来源https://github.com/ladrower/jquery-ui-intervals

#4

I did edit.

我做了编辑。

You can look to http://jsfiddle.net/q5WEe/1/

你可以看看http://jsfiddle.net/q5WEe/1/

I did edit line 70 to 82.

我编辑了70到82行。

            /*edit
            if ( o.values.length && o.values.length !== 2 ) {
                o.values = [ o.values[0], o.values[0] ];
            }*/
        }
        /*edit
        this.range = $( "<div></div>" )
            .appendTo( this.element )
            .addClass( "ui-slider-range" +
            // note: this isn't the most fittingly semantic framework class for this element,
            // but worked best visually with a variety of themes
            " ui-widget-header" +
            ( ( o.range === "min" || o.range === "max" ) ? " ui-slider-range-" + o.range : "" ) );*/

#5

var slider = $.widget("ui.slider", $.ui.mouse, {
    version: "1.11.4",
    widgetEventPrefix: "slide",
    //...
    value: function(newValue) {
        // ...
    },

    values: function(index, newValue) {
        // ...
    },

    //new function to allow creation of handles
    //you can add your own code to handle arguments or something for placing
    //the new handle in a specific spot
    addHandle: function() {
            //adds a new handle 
            this.options.values.push(this._trimAlignValue((this._valueMax() - this._valueMin()) / 2));
            this._refresh();
    },

    //new function to allow deleting handles
    //currently just takes the last value off, but you can make it fancier
    removeHandle: function() {
        //only remove a handle if there are more than 1 handles 
        if (this.options.values.length > 1) {
            this.options.values.pop();
            this._refresh();
        }
    },
   //...
 }

Then, when you want to call these functions, you do it like so

然后,当你想调用这些函数时,就这样做了

//when your 'add handle' button is clicked
$("#btn-add").click(function(){ 
    //call the add handle function you made within the slider widget
    $( "#slider" ).slider("addHandle"); 
});

$("#btn-remove").click(function(){
    $( "#slider" ).slider("removeHandle");
});

#6

如果您不坚持jQuery UI,noUiSlider也具有此功能并且可高度自定义。它无法立即告诉你范围,但是你可以通过手柄,min和max计数来轻松获得它们,如下所示:

//get array of connect elements (ranges)
var connect = multirange.querySelectorAll('.noUi-connect');

multirange.noUiSlider.on('update', function () {
 var valuesarr = multirange.noUiSlider.get(),
 max = multirange.noUiSlider.options.range.max[0],
 oldsum = multirange.noUiSlider.options.range.min[0];// = slider min, will be usually 0

 for ( var i = 0; i < connect.length; i++ ) {
     if(valuesarr[i]) $(connect[i]).text(valuesarr[i] - oldsum);
     else $(connect[i]).text(max - oldsum);
     oldsum=valuesarr[i];
 }
});

see fiddle!

秒客网

在一个滑块中创建多个范围滑动手柄

6 个解决方案

#1

#2

#3

#4

#5

#6

#1

#2

#3

#4

#5

#6

相关文章