All geek questions in one place

Limit jQuery slider to the value of another slider

I was working on a situation where I had two jQuery sliders that I took from here: http://jqueryui.com/demos/slider/#rangemin

I needed to limit it to the basis of the meaning of another, so that they would not overlap. I came up with the code below. This worked, except for one very unpleasant problem - when I was dragging the sliders, they passed each other while I was still dragging them, only to restore the limited value when I release the mouse button.

Purely by accident, I found a solution to adding ui.someunknownmethod ('1'); below.

So my question is: can I save this line without any problems?

<style type="text/css"> body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;} #slider1 .ui-slider-range { background: #8ae234; } #slider2 .ui-slider-range { background: #729fcf; } #sliderContainer{ width: 400px; margin: 6px 0px; } </style> </head> <body> <!-- Slider --> <div id="sliderContainer"> <div id="slider1"></div> </div> <div id="sliderContainer"> <div id="slider2"></div> </div> <span id="txt">-</span> <span id="txt2">-</span> <script> $(function(){ $("#slider1").slider({ orientation: "horizontal", range: "max", max: 255, value: 50, slide: refresh1, change: refresh1 }); $("#slider2").slider({ orientation: "horizontal", range: "max", max: 255, value: 30, slide: refresh2, change: refresh2 }); }); function refresh1(e, ui) { var slider2 = $("#slider2"); var v1 = ui.value; var v2 = slider2.slider('value'); if(v1 < v2) { $("#slider1").slider('value', v2); //This is the line that "saves the day" ui.someunknownmethod('1'); } $("#txt").text(v1); } function refresh2(e, ui) { var slider1 = $("#slider1"); var v1 = slider1.slider('value'); var v2 = ui.value; if(v2 > v1) { $("#slider2").slider('value', v1); //This is the line that "saves the day" ui.someunknownmethod('1'); } $("#txt2").text(v2); } </script> </body>

EDIT: Do not use the unhandled exception throwing approach - it will work in most browsers, of course, except for the older IE, where the browser displays a pop-up window for the message every error occurs. This would be very unpleasant for the user!

So far, I have not been able to find what I was looking for (well, except for rewriting the slider user interface code), so if anyone finds out, post it here ...

+4
source share
3 answers

you can do something like

 $("#slider2").slider("option", "min", 25);

or

 $("#slider2").slider("option", "max", 25);

see http://jqueryui.com/demos/slider/#methods for more information / methods

+1
source

Reading the API , it looks like you can change the min and max also after the slider has already been initialized. All you have to do is keep the slider1 "min" parameter equal to the slider2 "max" parameter, updating each time you drag one of them.

0
source

Here are my 2 cents (main slider update sub slider min value :

 jQuery(function($){ var handle1 = $( "#sub" ); $( "#sub-slider" ).slider({ min: 12, max: 28, create: function() { handle1.text( $( this ).slider( "value" ) ); }, slide: function( event, ui ) { handle1.text( ui.value ); } }); //#menu-line var handle = $( "#main" ); var main_val; $( "#main-slider" ).slider({ min: 16, max: 36, create: function() { handle.text( $( this ).slider( "value" ) ); }, slide: function( event, ui ) { handle.text( ui.value ); main_val = ui.value; $( "#sub" ).text(main_val); $( "#sub-slider" ).slider( 'option', 'min', main_val); } }); });
0
source

Source: https://habr.com/ru/post/1382862/

More articles:


All Articles