- Home /
how to segregate slider with lines?
Hi, I am trying to figure out how to segregate a slider with lines like shown here...
But all I've come up with is using a for loop to spawn lines from left to right. But i cant figure out how to dynamically space each line apart to always have them fit in the slider based on how may lines I spawned ie "spawn 5 lines and have those 5 lines fit in the slider spaced apart as much as possible"
hopefully this makes sense and thanks in advanced for any replys
Answer by Bunny83 · Sep 21, 2019 at 06:30 AM
Well it depends on how you actually want the lines to be placed. In your picture you show roughly "half a segment" at the start and at the end while between each line you have a "full segment". This is a quite common way but not necessarily what you're looking for. Another way would be to place the first and last line at the absolute start and end and distribute the rest (n - 2) lines in between. Finally there's the way to leave out the first and the last segment and just distribute the lines evenly with omitted start and end lines.
This is all just basic maths. First we assume the total width of your range is "width" long. We want to have "n" lines. Now you should think about how many sections you actually need for the number of lines you want based on one of the 3 types I mentioned above.
For the first case where you have half a segment in the beginning and the end you have exactly as many segments as you have lines. All you have to do is offset them all by half a segment length.
float segmentLength = (float)width / n;
float offset = segmentLength * 0.5f;
For the second case we have (n-1) segments and no offset since we place the first line at the very start
float segmentLength = (float)width / (n-1);
float offset = 0f;
For the thrid case we have (n+1) segments and just a full segment offset for the first line:
float segmentLength = (float)width / (n+1);
float offset = segmentLength;
So no matter which of those 3 vaiants you want, the actual loop always looks the same
for(int i = 0; i < n; n++)
{
float xPos = offset + segmentLength * n;
// use your xPos here
}
Note that this essentially assumes zero width lines. So the positions of the lines are exactly in the middle. That means if your lines actually have a noticable width you get the following issues:
The first case should just work. You still see half of the visible segment at the start and end.
For the second case the first and last segment would appear slightly larger (half the line width).
For the thrid case the start and end lines will of course undershoot / overshoot the $$anonymous$$ / max range by half the line width. While this is the correct way to draw it (since the center of a line should mark this position) you have to keep in $$anonymous$$d that you might have to shrink your slider range slightly in order to fit perfectly.
Though it all boils down to how your slider works. Does the slider itself has a width? Is the slider's position based on the sliders center and can it over / undershoot the start and end position by half the slider width? Or is the slider always confined in the specified visual range? I mean creating a scale for a slider is pretty pointless if it doesn't reflect the actual values the slider represents. So if the user drags the slider to the middle mark it should be half the value.
Your answer
Follow this Question
Related Questions
Multiple Cars not working 1 Answer
Distribute terrain in zones 3 Answers
Slide to show characters to buy C# 2D 1 Answer
how to control SMOOTHNESS via GUI slider?! It's not working...pls help! 1 Answer
Flip over an object (smooth transition) 3 Answers