Enhancing the Slider component with custom tick marks
Another enhancement you can make to the Slider component is adding custom tick marks. This recipe teaches you how this can be accomplished using a background image and cascading stylesheets, as seen in the following screenshot:
How to do it...
1. Create an image with tick marks, as seen below:
2. Create a CSS class that will be used to position the tick mark image behind the Slider:
<style type="text/css"> .vertical-slider { background: url(img/ticks-vert.gif) no-repeat 20px 20px; } </style>3. Define the
Slider:Ext.onReady(function() { var slider = new Ext.Slider({ renderTo:Ext.getBody(), vertical: true, minValue: 0, maxValue: 100, height: 214, increment: 10, plugins: new Ext.ux.SliderTip({ getText: function(slider) { return String.format('<b>{0}% of available space </b>', slider.getValue()); } }) }); });4. Add the
vertical-sliderCSS class to the document's body:<body class="vertical-slider" style="padding...
