JQuery Mobile Slider Widget uses js control and jquerywidget

JQuery Mobile Slider Widget uses js control and jquerywidget
JQuery Mobile slider Control

 

The basic usage is needless to say. Here:

Http://www.runoob.com/jquerymobile/jquerymobile-form-sliders.html

 

The creation method is very simple. Four different slide styles are also provided in runnoob.

However, only one effect is missing, that is, the input box next to it is removed (the input type is number ).

At first, I used the css modification method:

# Slider {display: none; float: left}

Here # slider is the id of the Slider Widget you created.

After hiding it, set the css of the slider. ui-slider-track.

(It is mainly to modify margin, pading, and so on. Open chrome and press F12 to change it ).

Later, it was found that you don't have to worry about it. You can add a class = "ui-hidden-accessible" to it to hide it perfectly.

 

Also, use js Code to control it:

Set the value of value
$ ("# Slider"). val (80). slider ("refresh ");

Set Min and Max values
$ ("# Slider"). prop ("min", 1). slider ("refresh ");
$ ("# Slider"). prop ("max", 100). slider ("refresh ");

Listener changes:
$ (Document). ready (function (){
$ ("# Slider"). on ('slidestop', function (event ){
Var slider_value = $ ("# slider"). val ();
Alert (slider_value );
});
});