Skip to content

jQuery rangeslider basic setup

Maikel Bos edited this page Jan 9, 2020 · 1 revision

Include the following script files and the style sheets in your page(s). The style sheet jquery-rangeslider.style.css is optional and provides basic styling; skip this or use it as a template if you want to provide your own styling. If you have installed the NuGet package you should find the script files in the Scripts folder and the style sheet in the Content folder.

<link rel="stylesheet" href="Content/jquery-rangeslider.min.css" />
<link rel="stylesheet" href="Content/jquery-rangeslider.style.min.css" />
<script type="text/javascript" src="Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-rangeslider.min.js"></script>

The plugin can be used to transform any element into a range slider simply by calling the rangeslider function on the jQuery object. It supports creating multiple sliders at the same time for a jQuery object containing more than one element.

<div id="example-rangeslider">
</div>

<script type="text/javascript">
    $('#example-rangeslider').rangeslider();
</script>
Clone this wiki locally