Hello folks,
I’m looking for some CSS help.
I have a slider bar here with text and ticks; however, as you can see, there are some clear problems.
- the text on the left and right are getting cut off
- except for the middle position, the "thumb’’ (i.e., the round thing on the slider bar) does not stay centred on the ticks.
- the ticks overlap the text
- (eventually I will try to figure out how to set the number of ticks and text dynamically)
I have taken some of the code from the slider bar example in Anvil’s custom library.
The rest of the code came from this online example:
As you can see, most of the problems I experience are not present in the above example. I could not manage to replicate that in Anvil unfortunately. This is due to my lack of understanding of CSS.
If any one could manage to solve any of the above issues, or even just help me with some general tips, I would be very grateful.
Here is my Clone:
https://anvil.works/build#clone:O7FJIMTCQLAEJ6KF=N66BOAMM42CDIENGLTZNPEKO
the problem is that the fiddle you are linking to isn’t css it’s scss
for a simple solution you can click the scss down key and click view compiled css
When I did that and copied the compiled css to your example it worked great!
1 Like
Thank you so much Stu! I’m going to try that right now.
@stucork Thanks again for pointing me in the right direction.
If you know of the top of your head, are you able to describe why the text on the left and right gets cut off? I seem to be only able to fit up to 6 characters.
it’s a problem with the approach in the original css since it only used single digit numbers
(width 1px with a 50px lineheight was the issue)
try this:
.tick {
position: relative;
display: flex;
justify-content: center;
width: 1px;
margin-top: 10px;
}
.tick::before {
content: "";
position: absolute;
top: -20px;
width: 1px;
background: gray;
height: 10px;
}
1 Like
It looks like the text on the ends is centered on the tick. That looks to me like a bug; or at least, an opportunity to parameterize.
If the bar will be used with plenty of space all around it, then the current layout is fine. But if the bar is going to be used in a constrained space, then the text on the ends should be justified left and right, respectively. If that’s not possible, then the line segment should be shortened enough to let the text fit.
1 Like
Thank you both. I really appreciate it. I’m going to keep plugging away with this new information.
I’ve really tried but this does indeed seem to be beyond my current skill level.
@stucork I used your CSS and was able to see more of the text; however, now the ticks are not centred on the “thumb” as shown here:
I’ve read nearly the whole first page of Google on the topic of “slider range with text and ticks” and came across an article called “a sliding nightmare: Understanding the range input” 
. Apparently it is a complex topic and not a simple component to create (at least for me).
At the end of the article, the author says this:
Our best option if we want a nice cross-browser result remains using repeating-linear-gradient for the ticks and the label element for the values corresponding to these ticks.
The corresponding fiddle for that approach is here, and while very promising, still leads to similar issues as mentioned above. I clearly need to learn much more CSS if I’m going to achieve a dynamically labelled slider component.
Thanks very much for your help. I’ll report back if I manage to make more progress.
1 Like
weird - it seems centred on mine…
I’ve also added a little bit of padding to the container to stop the words going off the edge
.range {padding-left: 7px; padding-right: 7px;}
css is so frustrating to get right!
I typically just open up the inspector tool and play around there until it seems good enough…
2 Likes
This is great @stucork. I see where my previous example went wrong now. I’m going to try to learn to use the inspector more effectively. Thanks again.
1 Like
