Lately I’ve been super busy, I’ve been getting some good hours for side work, and have been working on this really awesome charting application it’s not customizable to the extent of StockFetcher, but it’s cool in it’s own right.
Everything is driven and built dynamically based off of an xml file. The cool part of the app, is that in the xml I can specify the timeline I want to show, and customize all of these things called studies. Studies are calculations like On Balance Volume, Moving Average, and Double Smooth Stochastics. I have no clue what any of those things mean to a financial stock person, but looking at these graphs means something… pretty much whether or not to buy or sell stocks is what i presume.
Java, Coldfusion, and Flex marriage
We are using a customized java library for the calculations, and that helped out a lot. So we are leveraging three technologies here, Java, Coldfusion, Flex. It’s a great combonation, we’re not accessing any java directly with flex, but through coldfusion we are instantiating java objects in order to complete the calculations.
The Slider issue
The issues I needed to solve with the slider
- The slider had to be able to be dragged when clicked on
- accomplished with the flexlib slider
- Things that weren’t possible yet
- When clicking in the track the whole slider had to move
- IT ALSO HAD TO MOVE BY WHATEVER AMOUNT IT WAS SHOWING!
- so that means if the slider’s two thumbs were 60 datapoints apart, it would have to move 60 points to the left when the track was clicked on, or 60 points to the right when the track was clicked on
- MY BIG BEEF
- my beef with this was that, there really arent any events dispatched when you click on the track… it’s a private method that handles the animation and tweening of the slider to go to where ever it is on the track that you clicked…
- I didn’t like that at all, but I didn’t have time to fix it either.
- When you click and drag the slider (not the thumb, but the in between the thumbs) and you drag to the end of the track, the region that is locked shrinks or expands when you go out of it’s bounds…
- that we couldn’t
- When clicking in the track the whole slider had to move
My Solution
- I added the following attributes to the SliderBase
- lockRegionsOnTrackClick=”true”
- this solved the first issue stated above…. how the sliders had to move as a whole
- this was a little complicated simply because if there were multiple sliders you have to loop through them and change all of them by the proper amount.
- this solved the first issue stated above…. how the sliders had to move as a whole
- lockRegionsWhileDragging=”true”
- this solved the last issue where the slider was changing sizes if your mouse was either too far to the left of the track, or to the right of the track.
- moveByCurrentSpan=”true”
- this solved my issue of needing the sliders to move by whatever the current difference of the first and last thumbs were.
- again the challenge with this one, is you had to move the inner thumbs by the correct amount either to the right or left.
- this solved my issue of needing the sliders to move by whatever the current difference of the first and last thumbs were.
- lockRegionsOnTrackClick=”true”
so now you have the new slider
<flexlib:hslider snapinterval="1" maximum="9000" minimum="-9000" values="[-2000, 4000]" width="200" thumbcount="2" showtrackhighlight="true" datatipoffset="3" datatipplacement="bottom" showdatatip="true" livedragging="true" movebycurrentspan="true" lockregionswhiledragging="true" lockregionsontrackclick="true" allowthumboverlap="true" allowtrackclick="true" trackhighlightskin="flexlib.skins.SliderThumbHighlightSkin"> </flexlib:hslider>
Please check out the source and feel free to comment.
Please note these are just the same links as the ones that were at the top, they were just put here for convenience.
Application – Source
Popularity: unranked [?]




5 users commented in " Customizing the Flex Slider "
Follow-up comment rss or Leave a TrackbackCool slider, but I see chart you are writing about.
Also a chartexample that utilizes Meutzners sliders (not Mccoune)
http://www.softcapital.com/labs/demo/radarlite.html
Haa… i actually worked with brendan, we hired him out to handle a little bit on the project… he was a pleasure to work with. We actually had his slider in the project mockup, and the customer didn’t want it, it just took up too much room…
the whole goal of what we were doing was overtaking some old desktop software, and this is what the client was used to… so it what we made it do… and that functionality wasn’t built into the slider so, i just kinda did it… i don’t think it ever got integrated with flexlib though… i work with some of the guys that are owners of the project (darron, ben clinkenbeard) i should have them do it, but i know we’re all sorts of busy right now… but yeah…
thanks for reading, have a good one.
Looks great!
I just cant get it to work
maybe its cause im using flex builder 3 ?
i simply copy all files to a newly made flex project and then try to run FlexLibSliderTrackClick.mxml.
I get lots of errors in the compiler like
cannot resolve flexlib:vslider
Any ideas why?
Thanks in advance!
you need to go to http://code.google.com/p/flexlib/, download the swc, and put it in your libs folder…
hopefully that works… sorry for the late response
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
Leave A Reply