JQuery UI Slider

Sample code for a JQuery UI slider

by Trevor Dowdle

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<button id='increase' type="button">+</button>
<div id="slider-vertical"></div>

<p>Your slider has a value of <span id="result"></span></p>
<p>And step of: <span id="step">1</span></p>

CSS

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

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

JavaScript

var s = $("#slider-vertical").slider({
    orientation: "vertical",
    range: "min",
    min: 0,
    max: 200,
    value: 10,
    slide: function (event, ui) {
        if(ui.value > s.slider( "option", "max" ))
            ui.value = s.slider("option", "max");
      $("#result").text(ui.value);
    }
});

$('#increase').click(function () {
  s.slider( "option", "step", s.slider( "option", "step" )+1);
    $("#step").text(s.slider("option", "step"));
    
});