9 return element.find( ".ui-slider-handle" );
12 module( "slider: options" );
14 test( "disabled", function(){
18 element = $( "#slider1" ).slider();
19 element.bind( "slidestart", function() {
24 ok( !element.hasClass( "ui-slider-disabled" ), "no disabled class" );
25 equal( element.slider( "option", "disabled" ), false , "is not disabled" );
27 handle().simulate( "drag", { dx: 10 } );
28 equal( count, 1, "slider moved" );
30 handle().simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } );
31 equal( count, 2, "slider moved" );
34 element.slider( "option", "disabled", true );
35 ok( element.hasClass( "ui-slider-disabled" ), "has disabled class" );
36 equal( element.slider( "option", "disabled" ), true, "is disabled" );
38 handle().simulate( "drag", { dx: 10 } );
39 equal( count, 2, "slider did not move" );
41 handle().simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } );
42 equal( count, 2, "slider did not move" );
45 test( "max", function() {
47 element = $( "<div></div>" );
52 orientation: "horizontal",
57 element.slider( options );
58 ok(element.slider( "option", "value" ) === options.value, "value option is not contained by max" );
59 ok(element.slider( "value" ) === options.max, "value method is contained by max" );
60 element.slider( "destroy" );
64 test( "min", function() {
66 element = $( "<div></div>" );
71 orientation: "vertical",
76 element.slider( options );
77 ok( element.slider( "option", "value" ) === options.value, "value option is not contained by min" );
78 ok( element.slider( "value" ) === options.min, "value method is contained by min" );
79 element.slider( "destroy" );
83 test( "orientation", function() {
85 element = $( "#slider1" );
90 orientation: "vertical",
94 var percentVal = ( options.value - options.min ) / ( options.max - options.min ) * 100;
96 element.slider( options ).slider( "option", "orientation", "horizontal" );
97 ok( element.is( ".ui-slider-horizontal" ), "horizontal slider has class .ui-slider-horizontal" );
98 ok( !element.is( ".ui-slider-vertical" ), "horizontal slider does not have class .ui-slider-vertical" );
99 equal( handle()[0].style.left, percentVal + "%", "horizontal slider handle is positioned with left: %" );
101 element.slider( "destroy" ) ;
106 orientation: "horizontal",
110 percentVal = ( options.value - options.min ) / ( options.max - options.min ) * 100;
112 element.slider( options ).slider( "option", "orientation", "vertical" );
113 ok( element.is( ".ui-slider-vertical" ), "vertical slider has class .ui-slider-vertical" );
114 ok( !element.is( ".ui-slider-horizontal" ), "vertical slider does not have class .ui-slider-horizontal" );
115 equal( handle()[0].style.bottom, percentVal + "%", "vertical slider handle is positioned with bottom: %" );
117 element.slider( "destroy" );
121 //spec: http://wiki.jqueryui.com/Slider#specs
122 // value option/method: the value option is not restricted by min/max/step.
123 // What is returned by the value method is restricted by min (>=), max (<=), and step (even multiple)
124 test( "step", function() {
126 element = $( "<div></div>" ).slider({
132 equal( element.slider( "value" ), 0 );
134 element.slider( "value", 1 );
135 equal( element.slider( "value" ), 0 );
137 element.slider( "value", 9 );
138 equal( element.slider( "value" ), 10 );
140 element.slider( "value", 11 );
141 equal( element.slider( "value" ), 10 );
143 element.slider( "value", 19 );
144 equal( element.slider( "value" ), 20 );
146 element = $( "<div></div>" ).slider({
152 element.slider( "value", 0 );
154 element.slider( "option", "value", 1 );
155 equal( element.slider( "value" ), 0 );
157 element.slider( "option", "value", 9 );
158 equal( element.slider( "value" ), 0 );
160 element.slider( "option", "value", 11 );
161 equal( element.slider( "value" ), 20 );
163 element.slider( "option", "value", 19 );
164 equal( element.slider( "value" ), 20 );
166 element.slider( "destroy" );
169 //test( "value", function() {
170 // ok(false, "missing test - untested code is broken code." );
173 test( "values", function() {
176 // testing multiple ranges on the same page, the object reference to the values
177 // property is preserved via multiple range elements, so updating options.values
178 // of 1 slider updates options.values of all the others
180 document.createElement( "div" ),
181 document.createElement( "div" )
188 ranges.eq( 0 ).data( "ui-slider" ).options.values,
189 ranges.eq( 1 ).data( "ui-slider" ).options.values,
190 "multiple range sliders should not have a reference to the same options.values array"
193 ranges.eq( 0 ).slider( "values", 0, 10 );
196 ranges.eq( 0 ).slider( "values", 0 ),
197 ranges.eq( 1 ).slider( "values", 0 ),
198 "the values for multiple sliders should be different"
202 test( "range", function() {
207 element = $( "<div></div>" ).slider({
214 equal( element.find( ".ui-slider-handle" ).length, 1, "range min, one handle" );
215 equal( element.find( ".ui-slider-range-min" ).length, 1, "range min" );
216 element.slider( "destroy" );
219 element = $( "<div></div>" ).slider({
226 equal( element.find( ".ui-slider-handle" ).length, 1, "range max, one handle" );
227 equal( element.find( ".ui-slider-range-max" ).length, 1, "range max" );
228 element.slider( "destroy" );
231 element = $( "<div></div>" ).slider({
238 range = element.find( ".ui-slider-range" );
239 equal( element.find( ".ui-slider-handle" ).length, 2, "range true, two handles" );
240 ok( !range.is( ".ui-slider-range-min" ), "range true" );
241 ok( !range.is( ".ui-slider-range-max" ), "range true" );
242 element.slider( "destroy" );
244 // Change range from min to max
245 element = $( "<div></div>" ).slider({
250 }).slider( "option", "range", "max" );
252 equal( element.find( ".ui-slider-handle" ).length, 1, "range switch from min to max, one handle" );
253 equal( element.find( ".ui-slider-range-min" ).length, 0, "range switch from min to max" );
254 equal( element.find( ".ui-slider-range-max" ).length, 1, "range switch from min to max" );
255 element.slider( "destroy" );
257 // Change range from max to min
258 element = $( "<div></div>" ).slider({
263 }).slider( "option", "range", "min" );
265 equal( element.find( ".ui-slider-handle" ).length, 1, "range switch from max to min, one handle" );
266 equal( element.find( ".ui-slider-range-max" ).length, 0, "range switch from max to min" );
267 equal( element.find( ".ui-slider-range-min" ).length, 1, "range switch from max to min" );
268 element.slider( "destroy" );
270 // Change range from max to true
271 element = $( "<div></div>" ).slider({
276 }).slider( "option", "range", true );
278 equal( element.find( ".ui-slider-handle" ).length, 2, "range switch from max to true, two handles" );
279 equal( element.find( ".ui-slider-range-max" ).length, 0, "range switch from max to true" );
280 equal( element.find( ".ui-slider-range-min" ).length, 0, "range switch from max to true" );
281 equal( element.slider( "option", "value" ), 0 , "option value" );
282 equal( element.slider( "value" ), 1 , "value" );
283 deepEqual( element.slider( "option", "values" ), [1, 1], "option values" );
284 deepEqual( element.slider( "values" ), [1, 1], "values" );
285 element.slider( "destroy" );
287 // Change range from true to min
288 element = $( "<div></div>" ).slider({
293 }).slider( "option", "range", "min" );
295 equal( element.find( ".ui-slider-handle" ).length, 1, "range switch from true to min, one handle" );
296 equal( element.find( ".ui-slider-range-max" ).length, 0, "range switch from true to min" );
297 equal( element.find( ".ui-slider-range-min" ).length, 1, "range switch from true to min" );
298 equal( element.slider( "option", "value" ), 1, "value" );
299 equal( element.slider( "value" ), 1 , "value" );
300 equal( element.slider( "option", "values" ), null, "values" );
301 deepEqual( element.slider( "values" ), [] , "values" );
302 element.slider( "destroy" );