Jump to content

Sliding Toggle Fieldtype/Inputfield


BitPoet
 Share

Recommended Posts

As threatened in Ryan's announcement for 3.0.139, I built a little module for sliding toggles as a replacement for checkboxes. Styling of the input is CSS3 only (with all the usual caveats about older browsers), no JS necessary, and may still be a bit "rough around the edges", so to speak, since I didn't have much time for testing on different devices or brushing things up enough so I'd feel comfortable pushing it to the module directory. But here's the link to the GitHub repo for now:

InputfieldSlideToggle

Fieldtype and Inputfield that implements smartphone-style toggles as replacement for checkbox inputs. The visualization is CSS-only, no additional JS necessary.

Status

Beta, use with caution

Features / Field Settings

Size

You can render the toggles in four different sizes: small, medium, large and extra large.

Off Color

Currently, "unchecked" toggles can be displayed either in grey (default) or red.

On Color

"Checked" toggles can be rendered in one of these colors: blue (default), black, green, grey, orange or red.

Screenshots

slidetoggle_settings.png.ed7b742d9e18b7e59d91fe0f05366047.png

Some examples with checkbox label

slidetoggle_off_2.png.bfa5d88a49c2a42dfa5415d5a65c2bcb.png

slidetoggle_with_label.png.692448b4708f9913706c51a94dad6f22.png

View all Size and Color Combinations

 

slidetoggle_on.png

slidetoggle_off.png

slidetoggle_extra_big.png

slidetoggle_small.png

slidetoggle_on_2.png

toggles_extra_big.png

toggles_big.png

toggles_medium.png

toggles_small.png

  • Like 13
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...