In the demo:
http://demos.telerik.com/kendo-ui/slider/index
Slider / Basic Usage
demo
If you create sliders with different max, min, smallStep, and largeStep
attributes the tops of the verticle sliders won't line up unless
you have
vertical-align: top;
set.
Maybe you could add this to your demo code.
---
In the Style ... "div.eqSlider {"
vertical-align: top;
---
The demo all align because these 4 attributes are all set to the same values.
If you modify the demo so one is different it won't line up
in IE9. FF35 lines up unless you use a large max and a small min to cause no
hash marks to show up.
IE: -31 to 31
Below are some changes to the demo that makes the tops not line up.
...
<input class="eqSlider" value="10" />
<input class="eqSliderBig" value="15" /> <!-- Changed to use ...Big -->
...
$(".eqSlider").kendoSlider({
orientation: "vertical",
min: -20,
max: 20,
smallStep: 1,
largeStep: 20,
showButtons: false
});
/* Added Big to make the last slider have a different max,min */
$(".eqSliderBig").kendoSlider({
orientation: "vertical",
min: -30,
max: 30,
/* Change to -31 to 30 and no hash lines will show up and FF35 won't * align tops */
smallStep: 1,
largeStep: 20,
showButtons: false
});
...
div.eqSlider {
display: inline-block;
margin: 0 12px;
height: 122px;
vertical-align: top;
/* Added to make tops align even if the max, min, smallStep, or largeStep are different */
/* Remove and the tops won't align in IE9 */
}
/* Added for the ...Big slider */
div.eqSliderBig {
display: inline-block;
margin: 0 12px;
height: 122px;
vertical-align: top;
/* Added to make tops align even if the max, min, smallStep, or largeStep are different */
/* Remove and the tops won't align in IE9 */
}
...