Usage of roller control ext.slider in EXTJS4

[HTML]

The code is as follows	Copy Code
<div class= "Content" > <div id= "Slider1" ></div> <div id= "Slider2" ></div> <div id= "Slider3" ></div> </div>

[Js]

The code is as follows

Copy Code

Landscape, initial value 50 var slider1 = ext.create (' Ext.slider.Single ', { Renderto: ' Slider1 ', width:214, minvalue:0, MAXVALUE:100, Value:50 });    //Portrait, with tips     new ext.create (' Ext.slider.Single ', {          renderto: ' Slider2 ',         height:150,          minvalue:0,         maxvalue:20,         vertical:true,         plugins: New Ext.slider.Tip ()    }); Multiple values, custom hints var slider3 = ext.create (' Ext.slider.Multi ', { Renderto: ' Slider3 ', width:214, minvalue:0, MAXVALUE:20, Values: [5, 12], Plugins:new Ext.slider.Tip ({ Gettext:function (thumb) { Return Ext.String.format (' current:<b>{0}/20</b> ', thumb.value); } }) });

2. Get and set the value of the roller control
[HTML]

The code is as follows	Copy Code
<div class= "Content" > <button id= "Button1" > Set the value of roller 1 to 10</button> <button id= "Button2" > Get roller 1 value </button> <button id= "Button3" > set the value of roller 3 to 10,15</button> <button id= "Button4" > Get a set of values for roller 3 </button> </div>

[Js]

The code is as follows

Copy Code

Set the value of roller 1 to 10 Ext.fly ("Button1"). On (' click ', function () { Slider1.setvalue (10); }); Get the value of roller 1 Ext.fly ("Button2"). On (' click ', function () { Ext.MessageBox.alert ("Get Value", "Value of Roller 1:" + slider1.getvalue ()); }); Set the value of roller 3 to 10,15 Ext.fly ("Button3"). On (' click ', function () { Slider3.setvalue (0, 10); Slider3.setvalue (1, 15); }); Get a set of values for roller 3 Ext.fly ("Button4"). On (' click ', function () { Ext.MessageBox.alert ("Get Value", "set of values for Roller 3:" + slider3.getvalues ()); });

The effect picture is as follows