jQuery UI - Slider

by johnpapa

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<div class="demo">

<p>
    <label for="rating">Rating:</label>
    <input type="text" id="rating" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="mySlider"></div>

</div><!-- End demo -->

CSS

#demo-frame > div.demo { padding: 10px !important; }

JavaScript

$("#mySlider").slider({
        value: 2,
        min: 1,
        max: 5,
        step: 1,
        slide: function(event, ui) {
            $("#rating").val(ui.value);
        }
    });
    $("#rating").val($("#mySlider").slider("value"));