jQuery Slider Getting Started

Home >Shield UI Documentation >Slider >JavaScript >jQuery Slider Getting Started

The Slider widget allows you to select a visual representation of a numeric value.
In order to properly render it on the page, you need to:
1. Include references to all required scripts. Make sure you include the CSS file for your preferred theme.
2. Add an INPUT element for which to initialize the Rating functionality.
3. Initialize the widget.

<!DOCTYPE html>
<html>
<head>
<title>Shield UI Slider Demo</title>
<meta charset="utf-8" />


<link rel="stylesheet" type="text/css" href="css/light/all.min.css" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/shieldui-all.min.js" type="text/javascript"></script>

</head>
<body>

<input type="text" id="slider" />

<script type="text/javascript">
    jQuery(function ($) {
        $('#slider').shieldSlider({
              min: 1,
              max: 100,
              value: 20,
              step: 5
          });
    });
</script>

</body>
</html>

To see an example of the control in action, along with all the required code, please refer to the following example.