Reputation: 269
Novice here, Trying to put multiple sliders on one page. Have referenced other stack overflow posts. Getting hung up trying to display slider values.
Here is the HTML:
<div>
<div id="http" class="ui-widget-content">
<p style="text-align:center">slider1</p>
<input id="users1"/>
<div id="slider1"></div>
</div>
<div>
<div id="http" class="ui-widget-content">
<p style="text-align:center">slider2</p>
<input id="users2"/>
<div id="slider2"></div>
</div>
Here is the javascript I was came up with:
$('#slider').slider({
min: 0,
max: 50,
value: 1,
step: 1,
slide: function (event, ui) {
$( "#users").val(ui.value);
}
});
$("#users").change(function () {
var numusers = slider.children("#users")
$("#slider").slider("numusers", parseInt(this.value));
});
$(document).ready(function () {
$('#slider1').slider();
$('#slider2').slider();
$('#users1').users();
$('#users2').users();
});
From what I saw here: Multiple Jquery simple sliders on one page I was suffering from a global variable problem when not calling the functions at the end. Basically both sliders would move the value for users id in first div.
Below is what I started with for reference:
$(document).ready(function () {
$(".slider").slider({
min: 0,
max: 50,
value: 1,
step: 1,
slide: function (event, ui) {
$( "#users").val(ui.value);
}
});
$("users").change(function () {
$("#slider").slider("users", parseInt(this.value));
});
});
Upvotes: 1
Views: 266
Reputation: 316
Your biggest problem is the selectors. Each element must have unique Id. For example, jquery will never know who is "#users" because don't have any tag with this id, so you should change to users1 or users2
slide: function (event, ui) {
$( "#users2").val(ui.value);
}
I prepare a JSFiddle with an example that works https://jsfiddle.net/kevynsax/jnwhoztp/1/
const getUpdaterSlide = (slider, input) => () => {
const numUsers = $("#"+input).val();
console.log(slider);
$("#"+slider).slider("option", "value", numUsers);
}
const getUpdaterInput = input => (event, ui) => $("#"+input).val(ui.value);
const options = {
min: 0,
max: 50,
value: 1,
step: 1,
}
const getOptions = input => ({...options, slide: getUpdaterInput(input)});
$(document).ready(function () {
[
{slider: "slider1", input: "users1"},
{slider: "slider2", input: "users2"}
].forEach(({slider, input}) => {
$('#'+slider).slider(getOptions(input));
$('#'+input).change(getUpdaterSlide(slider, input));
});
});
body {
margin: 0;
}
.ui-widget-content{
margin: 24px 16px;
border: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet"/>
<div>
<div id="http" class="ui-widget-content">
<p style="text-align:center">slider1</p>
<input id="users1" value="0"/>
<div id="slider1"></div>
</div>
<div id="http2" class="ui-widget-content">
<p style="text-align:center">slider2</p>
<input id="users2" value="0"/>
<div id="slider2"></div>
</div>
</div>
Upvotes: 1