Flex: Getting the Tick's Distance of a Slider From Each Other In Pixel

Here is a step by step solution on getting the tick's distance to each other in pixel.

Scenario:

I have two sliders with the following properties:
- same size,
- one ticks each but on different position
- different maximum value

The said slider's need to align their ticks dynamically, which means I need to move the x-axis of both slider to adjsut it. Ticks position are value dependent on the slider.



Problem:

I need to adjust the position (which is in pixel) of the slider in flex dynammically based on the tick's position on the slider. The problem is, how to get the position of the tick in pixel relative to the scrubber's original x-position.

Analysis:

The slider's maximum value (Vmax) is considered a variable since it is changed dynamically. We can take the slider's x-position as the starting or original x-position and treat that as constant. The length (LenPx), which is in pixel, of the slider can be treated also as a constant, but we'll treat that as a variable for now to make sure that the code itself is dynamic too.

Mathematically, we can compute the value of the distance between each tick (tDist) with the following formula:

tDist = LenPx / Vmax

Putting that into code, we can get:

tDist = slider.width / sldier.maxValue

wherein width can be interchange with height in case it is a vertical slider.


Code:

public static function getTickDistance(length:Number, maxValue:Number):Number
{
 return length / maxValue;
}

Application to the Problem:

Since we already know the distance between each tick and given the facts on the scenario, we can now get the value of the adjustment to make to change the x axis of the sliders by this formula:

distanceToAdjust = tickMarkValue * getTickDistance(s.width, s.maxValue);

wherein:
s is the slider object
tickMarkValue is the value/position of the tick mark
distanceToAdjust is the adjusting value that we need to use in moving the sliders x-position (or y-position if vertical)
width can be interchange with height when using vertical slider

Sample Sliders:

SOURCE: slider sample from http://livedocs.adobe.com/flex/3/html/help.html?content=controls_14.html