min-max値が必要なので、2つの範囲スライダを作成する必要があります。
以下のスニペット を確認してください。
var rangeSlider = function(){
var slider = $('.range-slider'),
range = $('.range-slider__range'),
value = $('.range-slider__value');
slider.each(function(){
value.each(function(){
var value = $(this).prev().attr('value');
$(this).html(value);
});
range.on('input', function(){
$(this).next(value).html(this.value);
});
});
};
rangeSlider();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="range-slider">
<label>Min.</label>
<input class="range-slider__range" type="range" value="100" min="0" max="500">
<span class="range-slider__value">0</span>
</div>
<div class="range-slider">
<label>Max.</label>
<input class="range-slider__range" type="range" value="250" min="0" max="500" step="50">
<span class="range-slider__value">0</span>
</div>
そして、あなたがスペースを節約したい場合は、2コントロールスライダーで1つの範囲スライダを作成することができます。 範囲スライダーのhtmlを作成してjqueryを適用します。私は願っていますhttps://www.w3schools.com/howto/howto_js_rangeslider.asp
: あなたがDBへデータを提出したい場合は、範囲スライダのため、この
参考のためにフォームを作成する必要が続いて
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" media="screen">
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="rangeslider">
<label for="price-min">Price:</label>
<input type="range" name="price-min" id="price-min" value="200" min="0" max="1000">
<label for="price-max">Price:</label>
<input type="range" name="price-max" id="price-max" value="800" min="0" max="1000">
</div>
下のスニペットをご確認くださいこの回答は役に立ちます。
は、しかし、私は私の質問があったと見ることができ、THW答えてくれてありがとう混乱する。私はスライダー(フォームフォームへの入力のような)を作成するのではなく、カラーグラデーションの背景を持つ固定値の垂直線を持つ出力図を作成したいと思います。 – aqua