2064 posts
  • Has collected 50+ items on Envato Market
  • Has been part of the Envato Community for over 4 years
  • Sells items exclusively on Envato Market
  • Located in United States
Landonw says

Basically I have a jQuery UI range slider with 5 steps, and I want labels for each step. How would I go about this?

296 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+3 more
CodeFusion says

The only way I’ve been able to do that is by using spans and setting the margin-right of the span to position the “step marker”.

here; I tossed together a demo:
http://codefusionlab.com/slider_steps.html – view page source

Not saying this method is correct – I honestly don’t know – but it gets the job done and is cross browser complaint.

316 posts
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 3 years
+2 more
SyamilMJ says

You can use % instead of hard px. That way it’s more modular and can be integrated via PHP

296 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+3 more
CodeFusion says
For some reason, I cannot get % to scale correctly. Both sliders are using the same %s but the top slider is set to 400px wide and the bottom slider is set to 800px wide:
http://codefusionlab.com/slider_steps2.html

I recently had to use a slider with marked steps in one of my projects, and I tried several times with several variations, but the the alignment does not hold when I scale the slider. In my project I used class names with the pseudo :nth selector instead of hard coding each span – but I still had to set each and every one to a PX width and margin.

You have an example, or any guidance for using %’s? I’d love to get of the fixed widths, but I’ve not had any luck in doing so.

316 posts
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 3 years
+2 more
SyamilMJ says
296 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+3 more
CodeFusion says
Hayeeee! That’s clean!
http://jsfiddle.net/ejwZb/1/

Figures I was making it harder than it needed to be!

I don’t understand the borders thing though. Is its only job to push the marker down and to the left by 1 px? Sorry; I’m more of a developer than a designer.

316 posts
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 3 years
+2 more
SyamilMJ says

Yeah. Of course you can manually calculate to compensate for the borders, but that’s just messy & tedious. I found this out by accident while trying to implement the range slider for SMOF , which needed the tick marks to be auto positioned for a user-defined set of steps. :)

2064 posts
  • Has collected 50+ items on Envato Market
  • Has been part of the Envato Community for over 4 years
  • Sells items exclusively on Envato Market
  • Located in United States
Landonw says

Thanks guys! I had to adjust the “left” DOWN by 2% to suit the size of the labels, but it worked out well.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by