Seriously though… Why doesn’t this exist already?
I was really annoyed when recently when I realized how common it is for a user to switch/toggle between two values.
My example was an advertising dashboard looking between 7-day values, and 30-day values.
I wanted a damn switch to toggle between 7-day and 30-day without creating a radio button!
Below I will show you how to create a simple “switch/toggle” that works on all devices without any custom CSS.
The Trick is that you’ll need to map integers to values on your server.
So how do we do it? By Overloading the Range input
It might be a little too simple, but we basically convert the range to only support 2 values:
<input type="range" min="0" max="1" step="1" value="<%= params[:some_toggle].to_i %>" name="some_toggle">
Then on your server you can CAST
we cast nulls/blanks to 0 and treated as falsy
if params[:some_toggle].to_i == 1 # do something with ON / RIGHT else # do something with OFF / LEFT end