JQuery UI Slider example

Sample code for a JQuery UI slider

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<h1>HTML Slider Test</h1>

<div id="slider"></div>

<p>Your slider has a value of <span id="slider-value"></span></p>
<button id="cli">Autoplay</button>

CSS

h1 {
  font-family: Helvetica, Arial;
  font-weight: bold;
  font-size: 18px;
}

body,
p {
  font-family: Helvetica, Arial;
}

JavaScript

$("#slider").slider({
  value: 100,
  min: 0,
  max: 500,
  step: 50,
  slide: function(event, ui) {
    $("#slider-value").html(ui.value);
  }
});
$("#cli").on('click', function() {
  $("#slider").slider("option", "value", 150);
  alert($("#slider").slider("option", "value"));
});
//$( "#slider-value" ).html(  $('#slider').slider('value') );