{"id":114,"date":"2023-08-25T17:32:45","date_gmt":"2023-08-25T17:32:45","guid":{"rendered":"\/\/api.jquerymobile.com\/1.3\/?p=114"},"modified":"2023-08-25T17:32:45","modified_gmt":"2023-08-25T17:32:45","slug":"slider","status":"publish","type":"post","link":"https:\/\/api.jquerymobile.com\/1.3\/slider\/","title":{"rendered":"Slider Widget"},"content":{"rendered":"

\nSlider Widget<\/span>version added: 1.0<\/span>\n<\/h2>\n
\n

Description: <\/strong>Creates a slider widget<\/p>\n

QuickNavExamples<\/a>\n<\/h2><\/header>
\n

Options<\/h3>\n
disabled<\/a><\/div>\n
highlight<\/a><\/div>\n
initSelector<\/a><\/div>\n
mini<\/a><\/div>\n
theme<\/a><\/div>\n
trackTheme<\/a><\/div>\n<\/div>\n
\n

Methods<\/h3>\n
disable<\/a><\/div>\n
enable<\/a><\/div>\n
refresh<\/a><\/div>\n<\/div>\n
\n

Events<\/h3>\n
create<\/a><\/div>\n
start<\/a><\/div>\n
stop<\/a><\/div>\n<\/div><\/section>
\n\t\t

Slider<\/h2>\n\t\t

To add a slider widget to your page, use a standard input with the type="range"<\/code> attribute. The input's value is used to configure the starting position of the handle and the value is populated in the text input. Specify min<\/code> and max<\/code> attribute values to set the slider's range. If you want to constrain input to specific increments, add the step<\/code> attribute. Set the value<\/code> attribute to define the initial value. The framework will parse these attributes to configure the slider widget.<\/p>\n\t\t

As you drag the slider's handle, the framework will update the native input's value (and vice-versa) so they are always in sync; this ensures that the value is submitted with the form.<\/p>\n\t\t

Set the for<\/code> attribute of the label<\/code> to match the id<\/code> of the input<\/code> so they are semantically associated. It's possible to accessibly hide the label if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.<\/p>\n\t\t

The framework will find all input<\/code> elements with a type="range"<\/code> and automatically enhance them into a slider with an accompanying input without any need to apply a data-role<\/code> attribute. To prevent the automatic enhancement of this input into a slider, add data-role="none"<\/code> attribute to the input and wrap them in a div<\/code> with the data-role="fieldcontain"<\/code> attribute to group them. <\/p>\n\t\t

In this example, the acceptable range is 0-100.<\/p>\n\n

\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
<label<\/span> for<\/span>="slider-1"<\/span>><\/span>Input slider:<\/label<\/span>><\/span><\/code><\/div><\/div>
<input<\/span> type<\/span>="range"<\/span> name<\/span>="slider-1"<\/span> id<\/span>="slider-1"<\/span> value<\/span>="60"<\/span> min<\/span>="0"<\/span> max<\/span>="100"<\/span>><\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t
The default slider with these settings is displayed like this:\n\t\t