Radio Button Based 3-state Toggle/Switch Control – slider.css

Preview:

Description:

slider.css is a CSS library that converts regular radio buttons into customizable toggles/switch controls.

Supports both simple on/off toggles as well as 3-state sliders with intermediate options.

How to use it:

1. Download and import the slider.css.

<link rel="stylesheet" href="slider.css" />

2. For a basic ON/OFF toggle switch, use the following structure:

<label class="slider">
  <input class="sliderOption" type="radio" name="example" value="N">
  <input class="sliderOption" type="radio" name="example" value="Y" checked>
</label>

3.To leverage the “Intermediate” state, structure your input like this:

<label class="slider">
<input class="sliderOption" type="radio" name="example" data-letter="N" value="N">
<input class="sliderOption" type="radio" name="example" data-letter="?" value="U" checked>
<input class="sliderOption" type="radio" name="example" data-letter="Y" value="Y">
</label>

4. Customize styles using the following CSS variables.

--slider-background-color {
  ...
}
--slider-border-color {
  ...
}
--slider-color {
  ...
}
--slider-first-color {
  ...
}
--slider-last-color {
  ...
}
--slider-text-color {
  ...
}