This is a Flex component that adds a draggable bar between two slider thumbs. This is very similar to the “Dual Slider Component” developed by Brendan Meutzner that has been on Flex Exchange for a while now. I’m posting my version because 1) I created it a while ago without realizing there was a similar one out there already and 2) mine works differently by placing the draggable portion directly between the thumbs of the slider on the track.
It’s a simple component, basically nothing more than the VSlider or HSlider that’s included in the Flex Framework, slightly modified for my purposes. If you look at the source you’ll see that the bulk of the component is Slider.as, which is a direct copy of the mx.controls.sliderClasses.Slider class that was included in the framework (upgraded to use the 2.0.1 version). Slider.as was copied completely, and then I added a few things to make it draw an invisible draggable region between the two thumbs. This is an example of something that ideally should have been done by extending the Slider class, but since I needed to access some of the private drawing and child creation methods, I had to copy/paste all the code and make a duplicate class.
Usage is simple, just use it as you would the VSlider or HSlider components. You need to specify a skin for drawing the highlight track. The default halo skin doesn’t work very well (it draws a line around the border of the draggable region). I’ve included two skins for the draggable part, each are shown below in the example and are included in the source code.
You can download the source by using the link above, or you can also download the compiled SWC and drop it into your Flex project. This has the benefit that it will give you nice icons in the Components panel and it will show the previews of the components on the stage in Flex Builder.
Download the SWC: SliderComponent.swc (289 K)
Hi there – this component looks great, but I am having trouble installing it. When I add it to my project (add SWC in Library path tab) I get the following error: unable to load SWC SliderComponent.swc
Any ideas?
Good job. Love the thumb skin ;).
hmm, not sure what the problem with the SWC is. I just tried creating a new project and linking to the SWC and it seems to work fine. Maybe it’s a Flex Builder 2.0.1 thing? I used version 2.0.1 to compile and it uses a copy of the 2.0.1 Slider classes. So maybe it’s possible that the 2.0.1 version relies on some stuff in the framework that isn’t available in 2.0? Can you try using the source AS code and getting it to work?
Has anyone else tried using the SWC posted above? Success with Flex Builder 2.0 or 2.0.1?
I would like to see skin changes when I interact with the thumb skin. Currently, it appears that one of the sliders gives the visual output if I click on on the thumb.
Keep up the good work.
Nice work. I’ve been using the other dual drag slider component for a while but I’m having trouble assigning events that fire when sliding stops. Does your version have hooks to allow that? Basically, I need to call methods any time an individual slider is finished moving or the entire thing is finished moving…and get the values of the sliders. Make sense?
And thanks for your recent contributions…great work!
All the normal events of the Slider are fired, so you should be able to use the change event, which gets fired anytime the values of the slider change. Or if you only want to know when the user stops dragging, you can use the thumbRelease event. thumbRelease and change both get fired when you drag and drop either one of the thumbs, or the entire range.
Cool, thanks. I’ll give it a shot.
Doug, I’m having problems using the SWC file. I’ve added it through the Flex Build Path so it shows up in the components dialog. The sliders show the nice dual thumb icon (nice!). When I drag the component to the canvas, it inserts the regular single slider–with a different MXML prefix tag. It’s almost like it’s inserting the standard slider control. Any ideas? Am I importing the SWC file correctly?
Hmm, I’m not sure what the problem would be. When I drag the component to the stag Flex Builder automatically adds an auto namespace tag to the main Application MXML tag like: xmlns:ns1=”com.dougmccune.controls.*”
Then it adds the HSlider tag like: <ns1:HSlider />
Have you tried just manually typing the MXML instead of letting FlexBuilder do it for you? Maybe it’s a matter of having a component with the same name (HSlider and VSlider). Maybe if I named them slightly differently, like HDraggableSlider or whatever.
I’m using Flex Builder plugin 2.0.1.
When I drag the component the same things happen for me– new namespace added and the slider tag with ns1 is added to the canvas. Do I need to specify something to make both slider thumbs appear? When I build it as is, only one appears.
Oh yeah, you need to set thumbCount=2, also you should set the trackHighlightSkin to one of the ones I included in the SWC.
Try this:
<ns1:VSlider
trackHighlightSkin=”com.dougmccune.skins.SliderHighlightSkin”
allowTrackClick=”true” allowThumbOverlap=”true”
liveDragging=”true”
showDataTip=”true” dataTipPlacement=”left”
showTrackHighlight=”true”
thumbCount=”2″ height=”200″
values=”[-2000, 4000]”
minimum=”-9000″ maximum=”9000″ snapInterval=”1″
/>
Or check out the source of the example to see how the MXML tag for the HSlider looks. If you don’t specify thumbCount=2 then it will only show one, just like the normal slider.
You know, I was just saying to myself “check the source code sample” to see how to skin the control! That worked perfectly–thanks.
Doug:
Thanks for the nice component! Fits the bill for something I’m currently playing with. One thing I wonder about:
When I drag the highlight track and release, a change event seems to be generated for each thumb — I’m using two thumbs, so I see 2 change events in quick succession. The values array isn’t up-to-date with the visual state of the component until the last change event has fired. It would probably make more sense for a single change event to be fired in that circumstance — what do you think?
Is there any way to make the thumb btn on the slider bigger and or custom?
Also could not get the SWC to compile, using Eclipse. However, the source dropped in nicely and works well. Thanks Doug!
Very nice component.
I am having difficulties using it in FLEX 3. It seems to be a problem with the SliderThumb Class. I have tried everything but cannot make the component to actually show the thumbs… they are there but they have no skin and/or size so is very difficult to grab them. Any ideas on this?
In Flex 2.01 works FINE.
How can i use this Component in flash ?
@Kadir, the component is Flex-specific. It is based off the HSlider and VSlider components in the Flex SDK, so I don’t know of an easy way to use it in a Flash project, sorry.
Tnx for your component…
I found it very very very usefull..
It’s more compact than “Dual Slider Component” and so perfect for my charting box 🙂
Thanks again…
Component Not working in Flex 3,
It works Good in Flex 2.0.1.
Any idea
Sorry,
Still that problem persist (thumb not visible in Flex 3).
But we can overcome the above problem by specifying the manual thumb image.
Eg.,
thumbUpSkin=”@Embed(‘/assets/HSlider.png’)”
thumbDownSkin=”@Embed(‘/assets/HSlider.png’)”
I am also working in Flex Builder 3 and cannot get the component to work. Currently I am getting the error “Could not resolve to a component implementation. Could someone please post a working example of adapting this component for Flex Builder 3. Thanks.
I’m also using flex 3 now and this component is not working. The Thumbs don’t show up anymore, the basic functionality seems to work, but the visual thumbs on the slider are missing.
@Cody – I updated the component and the newest release is part of the FlexLib project. Download the latest FlexLib release from http://flexlib.net and use the draggable slider in there. That one has been fixed to work with Flex 3.
Doug
Sweet! Thanks Doug!
Hi Doug-
I followed the link you provided to Cody (specifically, the Quick Start link) and still had some troubles. I do not have the specific problem of resolving the that appears to be the main concern on the message board, but instead cannot resolve to component implementation. Further, when I try to view the example for the HSlider (Slider_Sample) in the examples folder, none of widget images render (show up as large X’s). I retraced the above steps three times to the same end.
Cody – were you able to successfully get this component to work?
Thanks
A great addition – thanks for sharing your work.
I’ve recently moved a project from flex2 to flex 3 and am having the same trouble as others: the thumbUpSkin/thumbOverSkin/thumbDownSkin all seem to be ignored. I was able to make the component usable in flex3 by adding a creationComplete function that simply stretched the thumbs to a usable height. But it still defaults to the little arrow image.
I’m kind of stuck here.. any ideas appreciated!
Is there any reason for horizontal line under tooltips. If you scroll vertical slider it appears from time to time on the white background.
I myself use horizontal slider and it is present all the time when tooltip appears.
Thanks for help
hoping this helps others: Since moving to flex 3 (and upgrading to the latest flexlib) I’ve been struggling with skinning the slider’s thumbs.
In the (great) component (thanks Doug), I have been including something like:
thumbUpSkin=”@Embed(‘assets/thumbLarge.png’)”
But it stopped working in flex3/new flexlib.
I found a “solution” -> by commenting out the 4 “setStyle(…” lines that are around line 127 in ExtendedSlider.as, my skins worked. Doug has a note in the code at that point about the flex3 SDK, though after messing with this a bit, I’m not clear on exactly what’s going on.
I’m no flex expert… so use with caution I guess.. but it got me in the right direction so maybe it’ll help others.
@PR – hmm, this *should* have been fixed already in the latest version of the FlexLib slider components (ie not the ones available for download on this page). I’m almost positive I committed a fix for that issue, but I’ll double check. Thanks for the tips though!
I found this thread yesterday while trying to determine why my custom thumbs refused to appear.
I downloaded the latest swc (March 8) and discovered that I do have to comment out the four lines in ExtendedSlider that PR mentions. I also had to make the class assignment that precedes those lines conditional in order to pick up my subclass of SliderThumb. My thumbs are not the default size (12 x 12).
if (this.sliderThumbClass == null) {
this.sliderThumbClass = SliderThumb;
}
Is there any way to style the two thumbs differently? My current client would like to use something like brackets to enclose the selected track area.
Thanks.
I have no idea why an 8 followed by a close paren turned into a smiley face!
hi Doug,
My application has a dual Slider, and i am required to have one of the thumbs fixed in a location. How do i fix the position of the thumb on a slider component. In other words the “slider-thumb” should be able to listen to a mouse clicks but once the user tries to click and drag the thumb it should no longer be draggable.
I tried to eat up the event by using ;
Event.stopImmediatePropagation();
this doesnt work for me! (this is done on thumbdrag event)
what should i do! please help.
Thanks in advance
Great work;
Actually I was looking for a drop down kind of slider like combo box which is a text input, button and a list wrapped in a single control, I tried to simulate the idea by replacing list with Slider in my new experimental control but when slider pops up, it takes space moving every thing else down, means it doesn’t behave like list in combo.
any comments or suggestions.
thanks
Cool example;
That really helpful at Slider Component, Thanks Doug!
Hi Doug,
really like your component. Is there an easy way to have the datatips for the different thumbs positioned seperately from each other. E.g have the data tip of the left thumb on the left side and the tip of the right tumb on the right side, in order to avoid their overlapping?
Thx in advance
Philipp
Awesome component. I just grabbed flexlib to use this with a chart.
If you’re getting warnings about getString() deprecation in FB3, here is the quick fix to loadResources() in SliderBase.as
import mx.resources.ResourceManager;
private static function loadResources():void
{
resourceDecimalSeparatorFrom =
ResourceManager.getInstance().getString(‘SharedResources’, ‘decimalSeparatorFrom’);
resourceThousandsSeparatorFrom =
ResourceManager.getInstance().getString(‘SharedResources’, ‘thousandsSeparatorFrom’);
resourceDecimalSeparatorTo =
ResourceManager.getInstance().getString(‘SharedResources’, ‘decimalSeparatorTo’);
}
I have used this slider.It’s really nice.But i have a problem.In my application i declared sliderbar like this.
This is a 30second movie. but the slider moves upto 3 seconds and the movie is stopped at 3 seconds. its not playing utto 30 seconds. what is the problem. Please help me
flexlib:HSlider id=”scrubBar”
liveDragging=”false” width=”402″ thumbCount=”1″
thumbPress=”slider_thumbPress()”
thumbRelease=”slider_thumbRelease()” value=”{myVideo.playheadTime}”
minimum=”0″ maximum=”{myVideo.totalTime}”
snapInterval=”0.001″ x=”32″ y=”276″
showTrackHighlight=”true”
lockRegionsOnTrackClick=”true”
lockRegionsWhileDragging=”true”
moveByCurrentSpan=”true”
invertThumbDirection=”true”
I have used this slider.It’s really nice.But i have a problem.In my application i declared sliderbar like this.
flexlib:HSlider id=”scrubBar”
liveDragging=”false” width=”402? thumbCount=”1?
thumbPress=”slider_thumbPress()”
thumbRelease=”slider_thumbRelease()” value=”{myVideo.playheadTime}”
minimum=”0? maximum=”{myVideo.totalTime}”
snapInterval=”0.001? x=”32? y=”276?
showTrackHighlight=”true”
lockRegionsOnTrackClick=”true”
lockRegionsWhileDragging=”true”
moveByCurrentSpan=”true”
invertThumbDirection=”true”
This is a 30second movie. but the slider moves upto 3 seconds and the movie is stopped at 3 seconds. its not playing utto 30 seconds. what is the problem. Please help me
It appears that the slider control has a thumbUpSkin, thumbDownSkin, etc. set of styles which don’t work. However, if you set the thumbSkin, style you can override the skin without a problem. The only “downside” with this approach is that you can’t specify the thumbSkin style inline on your MXML tag. You have to use set from your stylesheet.
I am a Java developer who has recently started doing Flex development. I am having a hard time understanding why the default CSS Styles get set when I use HSlider but not when I used ExtendedSlider. If I instantiate ExtendedSlider I will get:
TypeError: Error #1007: Instantiation attempted on a non-constructor.
at flexlib.baseClasses::SliderBase/createBackgroundTrack()[C:\EclipseWorkspace\QNotate1\QNotate3\src\flexlib\baseClasses\SliderBase.as:1679]
So this runtime error is because getStyle(“trackSkin”) returns null.
There seems to be some magic that the HSlider does when it extends ExtendSlider. I tried copying all the metadata from HSlider into the ExtendSlider class to see if that was the magic. So now ExtendSlider has everything that a HSlider defined. It still crashes. This makes little sense to me from an OO perspective.
I can obviously use the HSlider without issue, but I am missing something really fundamental concerning component creation and would appreciate any insight anyone could provide.
Doug, thanks for the great slider!
Hi Brain,
If you are using Flash Builder (Gumbo/Flex Builder 4) use -compatibility-version=3.0.0 as compiler option. this will resolve the problem.
Regards,
Imtiyaz Basha
I downloaded the source and ran the example in flex3.
I don’t see the triangle buttons.
Is this a result of Flex3?
Does anyone have a work-around or know where in the code I should look to resolve this?
Thanks in advance,
NVM,
I found that the http://code.google.com/p/flexlib/ source had a workable hack.
Thanks for making the change in the flexlib.
Much appreciated.
Hi All,
I’m a beginner in Flex. I trying with this custom component. I need to fire the event of thumbSkin change movement to function sliderChange. I have got value doesn’t macth for requirement. And also didn’t get the proper Currrent Slider value for checking for my requirement. Please any body help with this point.
private function sliderChange(event:SliderEvent):void {
Alert.show(“Slider Value”+(Slider(event.currentTarget)));
var currentSlider:Slider=Slider(event.currentTarget);
txt.text=”{Math.round(currentSlider.value)}”;
var val:Number = Math.round(currentSlider.value);
if(val < 50)
{
theme.visible = true;
themes.visible = false;
}
else
{
themes.visible = true;
theme.visible = false;
}
}
Regards
yuva
For the disappearing thumbs, just use the fully qualified skin name. thumbUpSkin=”mx.skins.halo.SliderThumbSkin” works for me in Flex 3.
can it work in flash builder 4 ?
Pingback: Making a Draggable Area Chart in Flex 3 | Tek Titan
Flex 3 provides a property humbCount for multiple thumbs.
How can I get an hslider with two thumbs in Flex 4.0?
Kindly help.