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

<input type="range">

It might be a little too simple, but we basically convert the range to only support 2 values: 0 and 1

Something like:

<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 Number(params[:some_toggle])

we cast nulls/blanks to 0 and treated as falsy

highlight

  if params[:some_toggle].to_i == 1
    # do something with ON / RIGHT
  else
    # do something with OFF / LEFT
  end

codeblock

if params[:some_toggle].to_i == 1
  # do something with ON / RIGHT
else
  # do something with OFF / LEFT
end