css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Based on Ana Tudor's styling of Range Sliders, I have used my own extension for jQueryUI to create really usable and pretty range sliders.

Comments

  1. I personally love the subtle growth effect on the active tick. That really brings these to life. Well done.

  2. Thanks @Yuschick ! :) -- I appreciate you noticed! :D

  3. Nice Simon! These sliders are beautiful! I agree with Daniel! That subtle animation really does bring these sliders to life!

  4. @simeydotme I love that this has keyboard support build in, it could do with some aria love, though :) See the aria range role, Slider design pattern on WAI-ARIA Authoring Practices, and Slider (multi-thumb) design pattern on WAI-ARIA Authoring Practices for more information.

  5. hey @Michiel , thanks! Actually it's just a visual upgrade for the jQueryUI slider widget. It's interesting though that the slider widget has no ARIA support, considering atleast some of the other JQUI widgets do have support. :/

  6. Great job on this. Love it.

  7. Great Job Simon :)

  8. @simeydotme badass sliders. slick animations. great visual improvements on ana's work. i might fork this and see if i can get your animations and tooltips to work on real input[type="range"] elements.

    @Michiel are you the keyboard-support-crusader for featured pens? codepen is mostly a prototyping space, and sometimes your expectations seem a little lofty for creative experiments.

  9. @wbarlow it's a title I would wear with pride, but no, that's not who I am; I'm a simple accessibility specialist and would love to see more developers care about accessibility, that includes demos. From experience I can tell that a lot of developer / authors simply don't know about it, or think that it is very hard. So I want to spread the word and enlighten people wherever I can.

    @simeydotme hmm, it's weird that jQuery UI hasn't included the proper aria attributes; I know some of their widgets do. It seems there is already a—rather old—bug report for aria support.

  10. @michiel I do care about accessibility in my day to day job of making user interfaces on the web. And it surprised me after reading your links how simple the ARIA support would be for the slider widget and that it isn't already included for JQUI :/

    I'm not an expert; but i have my share of experience satisfying Level3 requirements, both on microsites for government branches and private sector. So i will keep my mind open to patching ARIA support into the JQUI slider. :)

    However I also think @wbarlow had an excellent point about prototyping and idea sharing not necessarily facilitating completely bulletproof code; including accessibilty concepts. And in this context my demo was trying to show a more feature rich and better device support for range sliders like the ones Ana created earlier. Purely a visual enhancement. :)

    But it is good to share accessibility awareness; as there are going to be people on codepen who are completely new to the web dev world and are even unaware that they should be thinking about it. ;D

    I appreciate the comments and constructive discourse. :)

    Si.

  11. well done

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...