jQuery UI Slider example

By: Rajesh P.S.

jQuery UI Slider is a versatile user interface component that allows users to select a value within a specified range by dragging a handle along a horizontal or vertical track. It's built on top of the jQuery library and provides an interactive way to input numeric values.

Installation

To use jQuery UI Slider, you need to include the jQuery library and the jQuery UI library in your HTML file.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Basic Usage

To create a slider, you need to create an HTML element to act as the slider container.

Continue Reading...

<div id="slider"></div> // Initialize the slider $("#slider").slider();

Specifying Range

You can define a specific range of values that the slider can represent.

$("#slider").slider({ min: 0, max: 100 });

Displaying Initial Value

You can set the initial value of the slider handle.

$("#slider").slider({ value: 50 });

Vertical Slider

You can create a vertical slider by specifying the orientation.

$("#vertical-slider").slider({ orientation: "vertical", value: 30 });

Slider with Steps

You can create a slider with predefined steps.

$("#step-slider").slider({ min: 0, max: 100, step: 10 });

Slider Events

You can attach event handlers to slider events like slide and change.

$("#slider").slider({ slide: function(event, ui) { console.log("Sliding to:", ui.value); }, change: function(event, ui) { console.log("Value changed to:", ui.value); } });

Range Slider

You can create a range slider with two handles, defining a range of values.

$("#range-slider").slider({ range: true, min: 0, max: 100, values: [20, 80] });

Custom Handle

$("#custom-slider").slider({ value: 50, create: function(event, ui) { $(this).find(".ui-slider-handle").html("<span>50%</span>"); }, slide: function(event, ui) { $(this).find(".ui-slider-handle").html("<span>" + ui.value + "%</span>"); } });

You can customize the appearance of the slider handle.

Browser View

Value:

Full Source | jQuery

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery UI Slider Example</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <style> #slider-container { margin: 50px; } </style> <script> $(function() { $("#slider").slider({ min: 0, max: 100, value: 50, slide: function(event, ui) { $("#slider-value").text(ui.value); } }); $("#slider-value").text($("#slider").slider("value")); }); </script> </head> <body> <div id="slider-container"> <div id="slider"></div> <p>Value: <span id="slider-value"></span></p> </div> </body> </html>

Key Features

Range Selection: jQuery UI Slider allows for both single-handle and range selection. Developers can configure the slider to enable users to select a single value or define a range between two values.
Customizable Appearance: The Slider widget offers extensive customization options, including the ability to set custom styles, handle shapes, and track colors. This flexibility allows developers to match the slider's visual design with the overall look and feel of their web application.
Orientation: The Slider widget supports both horizontal and vertical orientations, giving developers the freedom to choose the layout that best suits their design requirements.
Step and Increment Options: Developers can define the step size or increment value for the slider, allowing users to select values with a specific interval. This feature is particularly useful when dealing with numerical or discrete value ranges.
Accessibility and Keyboard Support: jQuery UI Slider is designed with accessibility in mind. It supports keyboard interaction, allowing users to navigate and control the slider using arrow keys and other keyboard shortcuts.

Benefits

Easy Implementation: jQuery UI Slider simplifies the process of adding sliders to web pages, providing a straightforward API and a range of customizable options.
Cross-Browser Compatibility: The Slider widget is designed to work consistently across different web browsers, ensuring a consistent user experience for all visitors.
Touch and Mobile Support: The Slider widget is optimized for touch devices and mobile screens, enabling smooth and intuitive interaction on various devices.
Extensibility: Developers can extend the functionality of the Slider widget by utilizing jQuery UI's event system and integrating it with other components and plugins.

Conclusion

jQuery UI Slider offers a robust solution for implementing interactive sliders in web applications. It empowers developers to enhance user input and selection capabilities, enabling intuitive and precise control over numerical or range-based values.

Next > Jquery UI Dialog

Related Topics

More Related Topics.....