Pure CSS Animated Checkbox and Range Slider

25 Responses

  1. Joshua Hibbert 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.

    almost 2 years ago

  2. Glenn Hitchcock Glenn Hitchcock

    You crazy bastard.

    likes

    almost 2 years ago

  3. Paresh Khatri Paresh Khatri

    Pure CSS = Pure Awesomeness :)

    likes

    almost 2 years ago

  4. Kövesházi Dániel Kövesházi Dániel

    so sick... love it!

    likes

    almost 2 years ago

  5. ThisIsUI ThisIsUI

    WOW. Love It

    likes

    almost 2 years ago

  6. Thorsten Beeck 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.

    likes

    almost 2 years ago

  7. Nick Holmer Nick Holmer

    really awesome work, great job!

    likes

    almost 2 years ago

  8. Antonio Capuozzo Antonio Capuozzo

    You brilliant bastard! Well done!

    likes

    almost 2 years ago

  9. Alex Cican Alex Cican

    Love it, Joshua! :)

    likes

    almost 2 years ago

  10. Jeremy Sallée ✦✦✦	Jeremy Sallée ✦✦✦

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

    likes

    almost 2 years ago

  11. Aleksandar Djuric Aleksandar Djuric

    @Joshua Hibbert did it again! Great stuff!

    likes

    almost 2 years ago

  12. Joshua Hibbert Joshua Hibbert

    Thank you very much!

    almost 2 years ago

  13. Dhiren Adesara Dhiren Adesara

    Great job !

    likes

    almost 2 years ago

  14. Joshua Hibbert Joshua Hibbert

    Thanks, Dhiren :)

    almost 2 years ago

  15. Kasper Mikiewicz Kasper Mikiewicz

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

    likes

    almost 2 years ago

  16. Chris Burton Chris Burton

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

    likes

    almost 2 years ago

  17. Joshua Hibbert Joshua Hibbert

    Thanks, Chris!

    almost 2 years ago

  18. Zach Roszczewski Zach Roszczewski

    Woah.

    almost 2 years ago

  19. John Choura Jr. John Choura Jr.

    Floored.

    likes

    almost 2 years ago

  20. John Choura Jr. 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.

    likes

    almost 2 years ago

  21. Joshua Hibbert Joshua Hibbert

    almost 2 years ago

  22. Hugo Giraudel 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. :)

    likes

    over 1 year ago

  23. Joshua Hibbert Joshua Hibbert

    @Hugo Giraudel Thank you very much!

    over 1 year ago

  24. Andrey Maxim 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

    over 1 year ago

  25. Joshua Hibbert Joshua Hibbert

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

    over 1 year ago

keyboard shortcuts: previous shot next shot L or F like