YouTip

# jQuery UI API - Slider Widget ## Category (#) ## Usage **Description:** Drag the handle to select a value. **Added in version:** 1.5 The jQuery UI Slider plugin allows selection with a slider. There are various options, such as multiple handles and ranges. Handles can be moved with the mouse or arrow keys. The Slider widget creates handle elements with the class `ui-slider-handle` on initialization. You can specify custom handle elements by creating and appending them before initialization, adding the `ui-slider-handle` class to the element. It only creates the number of handles needed to match the length of [`value`](#)/[`values`](#). For example, if you specify `values: [ 1, 5, 18 ]` and create one custom handle, the plugin will create the other two. ### Theming The Slider widget uses the (#) to style its appearance and behavior. If you need to use slider-specific styles, you can use the following CSS class names: * `ui-slider`: The track of the slider control. This element will have an additional class of `ui-slider-horizontal` or `ui-slider-vertical` based on the slider's [`orientation`](#). * `ui-slider-handle`: The slider handle. * `ui-slider-range`: The selected range when the [`range`](#) option is set. If the `range` option is set to `"min"` or `"max"`, this element will have an additional class of `ui-slider-range-min` or `ui-slider-range-max`, respectively. ### Dependencies ### Additional Notes * This widget requires some functional CSS, otherwise it will not work. If you create a custom theme, use the widget-specific CSS file as a starting point. ## Example A simple jQuery UI Slider. #slider { margin: 10px; } $( "#slider" ).slider(); (#)