CODEWITHSUNDEEP
javascriptjquery
PA_Commons
PA_Commons

Reputation: 269

Javascript/JQuery multiple sliders one page

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

Answers (1)

Kevyn Klava
Kevyn Klava

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

Related Questions