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));
});

});