0
141
ViewsHow to create a slider bar with 2 mutually influencing thumbs in Javascript or jQuery?
Sorry, when I wanted to do this feature, it was the first time I learned jQuery. I have inquired a lot of web pages and questions, but I haven't been able to implement it in the past few days. Really hope someone can help me!
My idea is to create a slider with two thumbs like the video below. When one of the thumbs is moved, the other will also change (if one is x and the other is y, the value entered by the user is a. Then the relationship between the two may be y = 2a-x)
I used the following .css and jQuery to create a slider (with a lot of useless code removed):
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$( function() {
$( "#myRange" ).slider({
range: false,
min: 0,
max: 200,
values: [80, 120],
slide: function( event, ui ) {
var x = ui.values[0];
var y = ui.values[1];
}
});
});
</script>
and
<input type="number"/>
<div id="myRange"></div>
1 answers
Answer question0
Consider the following.
$(function() {
$("#myRange").slider({
range: false,
min: -200,
max: 200,
values: [80, -80],
slide: function(event, ui) {
var x, y, a = parseInt($("#a").val());
if ($(".ui-slider-handle.ui-state-focus").index() == 0) {
x = ui.values[0];
y = (2 * a) - x;
$(this).slider("values", 1, y);
} else {
y = ui.values[1];
x = (2 * a) - y;
$(this).slider("values", 0, x);
}
$("#x-val").html(x);
$("#a-val").html(a);
$("#y-val").html(y);
}
});
});input[type='number'] {
width: 3em;
}
#myRange {
margin: 10px;
}
#myRange .ui-slider-handle:nth-of-type(1) {
margin-top: -10px;
}
#myRange .ui-slider-handle:nth-of-type(2) {
margin-top: 10px;
}
.log span {
margin-right: 0.25em;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<div class="ui-widget">
<div class="ui-widget-content" style="margin-bottom: 20px;">
<label for="a">Enter Number</label>
<input type="number" id="a" value="0" />
</div>
<div id="myRange"></div>
</div>
<div class="log">
<label>X:</label><span id="x-val">80</span><label>A:</label><span id="a-val">0</span><label>Y:</label><span id="y-val">120</span>
</div>The tricky part in this is that the user can grab either Handle. Knowing which handle has the Focus allows us to assign the proper value.
Update
You can tighten it up a bit too:
$(function() {
$("#myRange").slider({
range: false,
min: -200,
max: 200,
values: [80, -80],
slide: function(event, ui) {
var a = parseInt($("#a").val());
if ($(".ui-slider-handle.ui-state-focus").index() == 0) {
$(this).slider("values", 1, (2 * a) - ui.values[0]);
} else {
$(this).slider("values", 0, (2 * a) - ui.values[1]);
}
}
});
});