I was trying to use the two thumb HSlider in a project and was unhappy with the way the basic HSlider performed, so this is a tutorial on how the HSlider works and how to improve it so that it works correctly.
A two thumb slider lets you choose a range of values. If you have a slider with a range of years from 2000 to 2007, I want the user to pick a range of dates. The range can be all dates (2000 – 2007) or some (2002-2005) or just one year (2004). Choosing specific years is not possible (2001, 2004, 2005). The problem with the basic HSlider is that you can not pick just a single year. With the thumbOverlap property disabled, the two thumbs could not be on the same value. With the thumbOverlap property enabled, then the lower slider could overlap and go past the upper slider. For example, if the upper slider was at 2005, then the lower slider could choose any value, including 2005, 2006, and 2007 – a feature that doesn’t look right. The proper behavior that I wanted was for the lower slider to meet the upper slider and push it further up if needed, but never go past the upper slider. The same behavior is true for the upper slider – never go below the lower slider.
and here is the code
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.events.SliderEvent;
import mx.controls.sliderClasses.Slider;
private function sliderChange(event:SliderEvent):void {
var slid:Slider=Slider(event.currentTarget);
thumbLeft.text="Thumb Left: " + String(slid.values[0]);
thumbRight.text="Thumb Right: " + String(slid.values[1]);
thumbIndex.text="Thumb index: " + String(event.thumbIndex);
}
]]>
</mx:Script>
<mx:HSlider thumbCount="2" change="sliderChange(event);" id="slider1" labels="['0'],['5'],['10']"/>
<mx:CheckBox label="allowThumbOverlap" id="thumbOverlap" selected="false" click="slider1.allowThumbOverlap=thumbOverlap.selected"/>
<mx:CheckBox label="allowTrackClick" id="trackClick" selected="true" click="slider1.allowTrackClick=trackClick.selected"/>
<mx:CheckBox label="liveDragging" id="dragging" selected="false" click="slider1.liveDragging=dragging.selected"/>
<mx:Label text="TickInterval:"/>
<mx:NumericStepper minimum="0" maximum="10" stepSize="1" id="tickinterval" value="0" change="slider1.tickInterval=tickinterval.value"/>
<mx:Label text="SnapInterval:"/>
<mx:NumericStepper id="snapinterval" value="0" minimum="0" maximum="10" stepSize="1" change="slider1.snapInterval=snapinterval.value"/>
<mx:Text id="thumbLeft"/>
<mx:Text id="thumbRight"/>
<mx:Text id="thumbIndex"/>
</mx:Application>