CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
matthiku
matthiku

Reputation: 3730

Have two "competing" jquery mobile sliders with the other's value set to 0 if one is changed

I want to show a graph of activity on a web site and am giving the user the option to select a date range of either 1-23 hours or 1-15 days. For that, I've created 2 sliders with the help from here.

So when the user moves one slider, I want to reset the value of the other slider to 0.

HTML:

<div id="sld_hours">
  <input type="range" data-theme="a"
    data-hightlight="true" data-popup-enabled="true"
    name="hours" id="hours" value="1" min="0" max="23">
</div>
<div id="sld_days">
  <input type="range" data-theme="a"
    data-hightlight="true" data-popup-enabled="true"
    name="days" id="days" value="0" min="0" max="15">
</div>

JavaScript: 

$('#sld_hours').change(function(){
  if (0 !== $('#days').val()) {
    $('#days').val(0).slider("refresh"); }
});
$('#sld_days').change(function(){
  if (0 !== $('#hours').val()) {
    $('#hours').val(0).slider("refresh"); }
});

If I omit the '.slider("refresh")' part of the code in each function, it works fine, but the value doesn't get updated on the screen so the user doesn't see that the other value has been reset to 0.

With the refresh-method active, I trigger the same change event on the other slider so that both sliders remain on 0 and can't be moved any more.

Is there a better way to handle this situation?

Upvotes: 1

Views: 103

Answers (2)

ezanker
ezanker

Reputation: 24738

The jQM slider has a STOP event which triggers after a user finishes interacting with it. As the user can also directly enter a number in the input at the left of the slider you can handle the blur event too:

$( "#hours" ).on( "slidestop blur", function() {
      if (0 !== $('#days').val()) {
        $('#days').val(0).slider("refresh"); 
      }    
});
$( "#days" ).on( "slidestop blur", function() {
    if (0 !== $('#hours').val()) {
        $('#hours').val(0).slider("refresh"); 
    }
});

Here is a DEMO

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

Better UI may be to have a single slider:

|1---------hours-------23|1----days----15|

It'd also make your code much simpler! Internally, you'd have a slider ranging from 1 to 38, with values from 1 to 23 being hours, and 24 to 38 being days (after subtracting 23).

Upvotes: 0

Related Questions