Consider the following.
$(function() {
$(".slider").change(function() {
var v = $(this).val();
$(this).next(".value").html(v + "000000");
if ($(this).is("#priceFrom")) {
$("#priceTo").attr("min", v).val(v).trigger("change");
}
});
});
.form-group label {
width: 60px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label>FROM</label> <input type="range" min="2" max="9" value="2" class="slider" id="priceFrom" /> <span class="value">2000000<span>
</div>
<div class="form-group">
<label>TO</label> <input type="range" min="2" max="9" value="2" class="slider" id="priceTo" /> <span class="value">2000000<span>
</div>
Here you can see the HTML and jQuery code working together to help adjust one or the other slider.
3
solved Need help in changing the dropdowns into range slider. Any help would be appreciated [closed]