动态更改范围滑块的起始值

Question

我在页面上使用了两个范围滑块，我希望这两个滑块互相依赖。

我的第二个滑块永远不能包含比我的第一个滑块更低的值，它应该从第一个滑块上的选定内容开始。

我试图改变自己， 这是我到目前为止有：https://codepen.io/anon/pen/xrOQeM

$(document).ready(function() { 

    var input1 = $("input").val(); 
    console.log(input1); 

    var input2 = $("#second"); 
    $("#second").attr("min",input1); 

    alert(input2); 
}); 

Answer 1

将这个您的JS文件中。它应该工作。或者按照这个例子。 https://codepen.io/ayang10/pen/BZzEWZ

var valueBubble = '<output class="rangeslider__value-bubble" />'; 

var rangeSlider1 = $('#first'); 
var rangeSlider2 = $('#second'); 

function updateValueBubble(pos, value, context) { 
    pos = pos || context.position; 
    value = value || context.value; 
    var $valueBubble = $('.rangeslider__value-bubble', context.$range); 
    var tempPosition = pos + context.grabPos; 
    var position = (tempPosition <= context.handleDimension) ? context.handleDimension : (tempPosition >= context.maxHandlePos) ? context.maxHandlePos : tempPosition; 

    if ($valueBubble.length) { 
    $valueBubble[0].style.left = Math.ceil(position) + 'px'; 
    $valueBubble[0].innerHTML = value; 
    } 
} 

rangeSlider1 
    .rangeslider({ 
    polyfill: false, 
    onInit: function() { 
    this.$range.append($(valueBubble)); 
    updateValueBubble(null, null, this); 
    }, 
    onSlide: function(pos, value) { 
    updateValueBubble(pos, value, this); 
    } 
    }) 
    .on('input', function() { 
    rangeSlider2[0].value = this.value; 
    }); 

rangeSlider2 
    .rangeslider({ 
    polyfill: false, 
    onInit: function() { 
    this.$range.append($(valueBubble)); 
    updateValueBubble(null, null, this); 
    }, 
    onSlide: function(pos, value) { 
    updateValueBubble(pos, value, this); 
    } 
    }) 


rangeSlider1.on('input', function() { 
    rangeSlider2.attr("min", this.value); 
    rangeSlider2.rangeslider('update', true); 
});