如何将jQuery Mobile中的范围滑块限制为最大值

Question

我在jquery移动代码中有一个input type="range"。基于某些条件，我想限制滑块手柄在一定限制后进一步（但它可以向后）

例如，这是我想在jQuery Mobile中实现的 - http://jsfiddle.net/EL4tf/（所有三个滑块的总数不超过150）

我面临的问题是jQuery Mobile会将input type="range"转换为input type="number"，因此我无法将条件event.preventDefault(); return false放在$('.mySlider').bind('change')上，就像他们放入以上小提琴示例。

任何帮助将不胜感激！

Answer 1

从我的评论中，我准备了一个简单的解决方案来计算滑块总值，并且如果大于总数150则停止增加。

**来自@ezanker的更新。在变更事件中使用相同的过程。停止滑块的轨道

<强>演示

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);
    }
})

Answer 2

如果要在拖动期间限制滑块，可以修改用于渲染滑块的<a>组件的CSS。

演示：http://jsfiddle.net/ukaxkej0/2/

试一试：如果总和已达到极限，滑块将不会进一步移动。

更改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)+'%');
    }
  }    
});

此外，如果总和超过最大值，则必须阻止滑块交互。

$('.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（由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>