Hacker News Reader

Comment by bee_rider | Hacker News Reader

For some reason this makes me want a toggle that:

* Moves slowly to about 75% of the way there while you hold the touch/click

* Snaps the rest of the way on release

I’m not sure what this could mean in terms of UX though. Maybe the setting is actually applied or saved at the end.

Or it could be part of an “are you sure?” dialogue. The setting is applied as you hold, but you can hit escape to undo before it snaps into place.

View on HN

https://jsfiddle.net/u1vybhqg/

  input:checked + .slider:active:before {
    transform: translateX(8px);
    transition: 1s;
  }
  
  input:not(:checked) + .slider:active:before {
    transform: translateX(18px);
    transition: 1s;
  }

This, but set closer to 200 or 100 ms (and for me, swapping the translate 8 and 18 so that the switch barely moves on mouseDown, because that's damn close to a real switch's behavior). This seems like it could be a good compromise to all of the people complaining about lag and others who understand that the visual system is powerful and movement is a huge part of that. Also, it's relatively simple as far as CSS animations go!

I have seen a lot of (eldery) people try to slide the toggle but then nothing happens.

So while your at it: also make it possible to slide the toggle. Or just use checkboxes.

I also did this in the beginning with these new-style sliders that are really just checkboxes. Because they look different, I assumed they were different. (I was probably like 17 when these things became fashionable, not quite elderly just yet and also deeply into technology in general.) I also did it because it wasn't quite clear which direction was "on", so I tried to make it go in a specific direction. They did work, though, also on swiping, so that didn't help the learning process either.

Anyway, point is: potentially more of an "it's new to me" thing than an "elderly" thing.

Reply on news.ycombinator.com