Create A Simple iOS Style Slider with jQuery and CSS - UI Slider

File Size: 8.03 KB
Views Total: 4412
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Create A Simple iOS Style Slider with jQuery and CSS - UI Slider

UI Slider is a simple jQuery plugin that converts an DIV elements into an iOS-Style range slider with some customization options.

How to use it:

1. Load the necessary jQuery library and the jQuery UI Slider plugin in the document.

<script src="//"></script>
<script src="js/jquery.ui-slider.js"></script>

2. Load the required jquery.ui-slider.css in the head section of the document. Feel free to modify the styles to your taste.

<link rel="stylesheet" href="css/jquery.ui-slider.css">

3. Create an empty container element for the range slider.

<div class="ui-slider-control"></div>

4. You can also create an element to display the current value you select.

<p id="value">0</p>

5. Initialize the plugin with options and output the current value using handleAction() function.

$(document).ready(function () {

var position = 30;

min: 1,
max: 100,
value: position,
smooth: false
.on('change', function (event, value) {





6. More usages.

//  Create:
min: 0,
max: 99,
value: 0,
smooth: true,
seekOnTrack: true,
seekOnOwner: true,
vertical: false, // true - to use vertical orientation

createElements: true,
allowFocus: false

// Read:
// => 50

// => 99

// Update:
$(elem).UISlider('value', 3);
$(elem).UISlider('update', {min: 1, max: 10});

// Destroy:

// Events:
$(elem).on('thumbmove', function (value) { ... }); // when slider thumb is moving
$(elem).on('change', function (value) { ... } ); // when user changes are complete

Change log:


  • Added vertical style; 'start' and 'end' events; 'allowFocus' property.


  • Fixed API behavior

This awesome jQuery plugin is developed by DenisIzmaylov. For more Advanced Usages, please check the demo page or visit the official website.