JQuery Mobile Slider Widget uses JS control

JQuery Mobile Slider bar control

Basic usage don't say more, look here:

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

The creation method is still very simple, the Runnoob also specially gave four kinds of different sliding bar style.

However, one less effect is to remove the input box next to (input type number).

The first method I used was the CSS modification method:

#slider {Display:none;float:left}

The #slider here is the ID of the slider Widget you created.

After hiding, set the slider bar. Ui-slider-track CSS.

(mainly to modify the margin, pading and the like, this open chrome, press F12 to change the good).

Later found not so troublesome, add to it a class= "ui-hidden-accessible" can be perfectly hidden.

There is also the use of JS code control it:

Set the value of
$ ("#slider"). Val (+) slider ("Refresh");

Set the value of Min, max
$ ("#slider"). Prop ("Min", 1). Slider ("Refresh");
$ ("#slider"). Prop ("Max"). Slider ("Refresh");

Monitoring changes:
$ (document). Ready (function () {
$ ("#slider"). On (' Slidestop ', function (event) {
var Slider_value = $ ("#slider"). Val ();
alert (Slider_value);
});
});

JQuery Mobile Slider Widget uses JS control