Pure CSS Animated Checkbox and Range Slider

25 Responses

1. Pro Joshua Hibbert

   Once again, this is webkit only (currently).

   If you want to click and slide, you can do so here: http://jsfiddle.net/jrFbM/show

   I would love to see what you can come up with.

   12 months ago

2. Pro Glenn Hitchcock

   You crazy bastard.

   4likes

   12 months ago

3. Pro Paresh Khatri ::::✈

   Pure CSS = Pure Awesomeness :)

   1likes

   12 months ago

4. Pro Kövesházi Dániel

   so sick... love it!

   1likes

   12 months ago

5. ThisIsUI

   WOW. Love It

   1likes

   12 months ago

6. Pro Thorsten Beeck

   Sexay Josh, really sexay. I actually wanted to continue with the redesign of my website but now I have to play with these two checkboxes and this slider the rest of the day.

   1likes

   12 months ago

7. Pro Nick Holmer

   really awesome work, great job!

   1likes

   12 months ago

8. Pro Antonio Capuozzo

   You brilliant bastard! Well done!

   1likes

   12 months ago

9. Pro Alex Cican

   Love it, Joshua! :)

   1likes

   12 months ago

10. Jeremy Sallée ✦✦✦

    I loved the mouse cursor when you go hover the slider. Good UX :)

    1likes

    12 months ago

11. Pro Aleksandar Djuric

    @Joshua Hibbert did it again! Great stuff!

    1likes

    12 months ago

12. Pro Joshua Hibbert

    Thank you very much!

    12 months ago

13. Pro Dhiren Adesara

    Great job !

    1likes

    12 months ago

14. Pro Joshua Hibbert

    Thanks, Dhiren :)

    12 months ago

15. Kasper Mikiewicz

    And here is my version that works even in IE :)
    http://designitcodeit.com/i/6

    2likes

    12 months ago

16. Chris Burton

    Great detail in the UI. I particularly like that the buttons seem raised which looks completely natural.

    1likes

    10 months ago

17. Pro Joshua Hibbert

    Thanks, Chris!

    10 months ago

18. Pro Zach Roszczewski

    Woah.

    10 months ago

19. Pro John Choura Jr.

    Floored.

    1likes

    10 months ago

20. Pro John Choura Jr.

    I right clicked to "Inspect Element" in Chrome, and i love unclicking/clicking the checked boxes to see how you pulled it off.

    1likes

    10 months ago

21. Pro Joshua Hibbert

    @Zach Roszczewski Haha :D

    @John Choura Jr. Thanks!

    10 months ago

22. Hugo Giraudel

    I've seen this a long time ago, and this is one of the thing which convinced me that CSS 3 is awesome. And now, I'm still sad that we can't style properly slider inputs except on WebKit.
    Amazing work anyway Joshua. :)

    1likes

    9 months ago

23. Pro Joshua Hibbert

    @Hugo Giraudel Thank you very much!

    9 months ago

24. Pro Andrey Maxim

    Hi man! Do you freelancing? I need to PSDtoHTML this http://cl.ly/image/0e1d210X1Z1b/o (WIP) with cool JS to win http://www.awwwards.com
    Is it interesting for u? My skype maxim.andrey

    9 months ago

25. Pro Joshua Hibbert

    @Andrey Maxim I don't currently have any free time to dedicate to freelancing. Sorry, mate.

    9 months ago