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

\nRangeslider Widget<\/span>version added: 1.3<\/span>\n<\/h2>\n
\n

Description: <\/strong>Creates a rangeslider 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
normalize<\/a><\/div>\n<\/div><\/section>
\n\t\t

The rangeslider widget can be considered as a double handle slider. To add a rangeslider widget to your page, use two standard inputs with the type="range"<\/code> attribute, and put them inside a <div><\/code> container. The input values are used to configure the starting position of the handles and the values are populated in the corresponding text inputs (the first one at the beginning of the rangeslider, and the second one at the end). Specify min<\/code> and max<\/code> attribute values to set the rangeslider's range. If you want to constrain inputs to specific increments, add the step<\/code> attribute. Set the value<\/code> attribute to each input to define their initial value. The framework will parse these attributes to configure the rangeslider widget.<\/p>\n\t\t

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

Set the for<\/code> attribute of the labels<\/code> to match the ids<\/code> of the inputs<\/code> so they are semantically associated. It's possible to accessibly hide the labels if they're 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\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
6<\/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
<div<\/span> data-role<\/span>="rangeslider"<\/span>><\/span><\/code><\/div><\/div>
  <label<\/span> for<\/span>="range-1a"<\/span>><\/span>Rangeslider:<\/label<\/span>><\/span><\/code><\/div><\/div>
  <input<\/span> name<\/span>="range-1a"<\/span> id<\/span>="range-1a"<\/span> min<\/span>="0"<\/span> max<\/span>="100"<\/span> value<\/span>="0"<\/span> type<\/span>="range"<\/span> \/><\/span><\/code><\/div><\/div>
  <label<\/span> for<\/span>="range-1b"<\/span>><\/span>Rangeslider:<\/label<\/span>><\/span><\/code><\/div><\/div>
  <input<\/span> name<\/span>="range-1b"<\/span> id<\/span>="range-1b"<\/span> min<\/span>="0"<\/span> max<\/span>="100"<\/span> value<\/span>="100"<\/span> type<\/span>="range"<\/span> \/><\/span><\/code><\/div><\/div>
<\/div<\/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 rangeslider with these settings is displayed like this:\n\t\t