如何将 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')就像他们在上面 fiddle 示例中所说的那样。

任何帮助将不胜感激！

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>

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

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

javascript

css

jquery

jquery-mobile