動態更改範圍滑塊的起始值

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