CODEWITHSUNDEEP
javascriptjquerycssjquery-mobile
Chirag Swadia
Chirag Swadia

Reputation: 1117

How to restrict range slider in jQuery Mobile to a maximum value

I have a input type="range"in jquery mobile code. Based on some condition, I want to restrict the slider handle to go further after a certain limit ( but it can go backward )

For example, this is what I want to achieve in jQuery Mobile - http://jsfiddle.net/EL4tf/ ( Total is not exceeding 150 for all the three sliders )

The problem I am facing is that jQuery Mobile converts input type="range" into input type="number" therefore I am not able to put the condition event.preventDefault(); return false on $('.mySlider').bind('change') like they have put in the above fiddle example.

Any help will be appreciated!

Upvotes: 0

Views: 1799

Answers (2)

Tasos
Tasos

Reputation: 5361

From my comment, i prepared a simple solution which calculates the sliders total value and stops them increasing if greater than the total 150.

** Update from @ezanker. using the same process on change event. stops the slider in its tracks

Demo

http://jsfiddle.net/8jddyftc/

Jquery

var tota, totb, totc, alltot, altval, getslider;
var chktot = 150;
var scrore = 151;

//On Change event 

$(document).on("change", "#range1, #range2, #range3", function (e) {

    // Get the sliders Id
    getslider = $(this).attr("id");

    //Gather all slider values
    tota = parseInt($("input#range1").val());
    totb = parseInt($("input#range2").val());
    totc = parseInt($("input#range3").val());
    alltot = tota + totb + totc;

    //check sliders total if greater than 150 and re-update slider 
    if (alltot > chktot) {
        if (getslider == "range1") {
            altval = chktot - totb - totc;
            $("input#range1").val(altval).slider("refresh");;
        }
        if (getslider == "range2") {
            altval = chktot - tota - totc;
            $("input#range2").val(altval).slider("refresh");;
        }
        if (getslider == "range3") {
            altval = chktot - tota - totb;
            $("input#range3").val(altval).slider("refresh");;
        }
    }

    //Update Total
    if (alltot < scrore) {
        $("#total").text(alltot);
    }
})

Upvotes: 1

sina72
sina72

Reputation: 5101

If you want to limit the slider already during dragging, you can modify the CSS of the <a> component that is used to render the slider.

Demo: http://jsfiddle.net/ukaxkej0/2/

Try yourself: the slider will not move further if the sum is already at its limit.

To change the CSS: 

var MAX = 150; // maximum allowed sum
var DEFAULT = 50; // slider default
var SMAX = 100;   // slider max
var old1=DEFAULT, old2=DEFAULT, old1=DEFAULT;

// sliders trigger number changes; prevent them if sum exceeds maximum
$("input[type='number']").change(function(e){
  var val1 = $("#range1").val();
  var val2 = $("#range2").val();
  var val3 = $("#range3").val();
  var sum = parseInt(val1) + parseInt(val2) + parseInt(val3);

  if (sum <= MAX) {
    $("#total").text(sum);
    old1=val1; 
    old2=val2; 
    old3=val3;
  }
  else {
    if (val1 != old1) { 
        $("#range1").val(old1); 
        $("a[aria-labelledby='range1-label']").css('left', (100*old1/SMAX)+'%');
    }
    if (val2 != old2) { 
        $("#range2").val(old2); 
        $("a[aria-labelledby='range2-label']").css('left', (100*old2/SMAX)+'%');
    }
    if (val3 != old3) { 
        $("#range3").val(old3); 
        $("a[aria-labelledby='range3-label']").css('left', (100*old3/SMAX)+'%');
    }
  }    
});

In addition, you have to prevent slider interaction if the sum exceeds the maximum.

$('.ui-slider-handle').mousemove(function(e){
  var val1 = $("#range1").val();
  var val2 = $("#range2").val();
  var val3 = $("#range3").val();
  var sum = parseInt(val1) + parseInt(val2) + parseInt(val3);

  if (sum > MAX) {
    e.preventDefault();
    return false;
  }
  return true;
});

HTML (as suggested by Tasos): 

<div data-role="page">
  <input id="range1" type="range" min="0" max="100" value="50" />
  <input id="range2" type="range" min="0" max="100" value="50" />
  <input id="range3" type="range" min="0" max="100" value="50" />
  <div>total: <strong id="total">0</strong>/150</div>
</div>

Upvotes: 1

Related Questions