Forms v1.0.0

Slider

Numeric value selection via draggable handle. Supports single value and range (two handles) modes, step marks, and live value display. Works standalone or inside Rails forms with hidden inputs for submission.

Preview & Code

_slider.html.erb

███
  ██████ █████████ █████████

  ██████ █████
    ███ ██████ ████████████████████ ██████ █████████ ██████ ███ ███████████ ████ ██

  █████ █████
    ███ ██████ ████████████████████ █████ ███████ ██████ ██████ ███████ ██████████ ███ ██████████ ███
        █████████ ████████████ █████████ ████████████ ███████████ ████ ██

Get Access to View Code

slider_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ █
    ████████
    ███████
    ████████
    ███████████
    ███████████
    ███████████████

Get Access to View Code

slider_component.html.erb

████ ██████████ █████████████████ ███
     ████████████████████████
     ██████████████████████████ ████ ███
     ██████████████████████████ ████ ███
     ███████████████████████████ █████ ███
     ████████████████████████████ ██████ ██ █ ███
     ████████████████████████████████ ██████████ ███
     ████████████████████████████████ ██████████ ███
     ███████████████████████████ █████ ████

Get Access to View Code

slider_component.rb

█ ██████████████████████ ████

█████ ███████████████ █ ███████████████████
  ███ ███████████
    █████ ████████
    ████ ██
    ████ ████
    █████ ██
    ██████ ████
    ██████████ ████

Get Access to View Code

slider_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ █
    ████████
    ███████
    ████████
    ███████████
    ███████████
    ███████████████

Get Access to View Code

Options

Name	Type	Default	Description
`mode`	Symbol	`:single`	Slider mode: :single for one handle, :range for two handles
`min`	Integer/Float	`0`	Minimum value
`max`	Integer/Float	`100`	Maximum value
`step`	Integer/Float	`1`	Step increment between values
`value`	Integer/Float	`50`	Current value (single mode)
`value_min`	Integer/Float	`nil`	Lower bound value (range mode, defaults to min + 25% of range)
`value_max`	Integer/Float	`nil`	Upper bound value (range mode, defaults to max - 25% of range)
`label`	String	`nil`	Label text displayed above the slider
`hint`	String	`nil`	Hint text displayed below the slider
`show_value`	Boolean	`false`	Show a live value tooltip above the thumb(s)
`marks`	Boolean/Array	`false`	true for auto step marks, or Array of {value:, label:} hashes
`disabled`	Boolean	`false`	Disable interaction
`name`	String	`nil`	Hidden input name for form submission (single mode)
`name_min`	String	`nil`	Hidden input name for range min value
`name_max`	String	`nil`	Hidden input name for range max value

Name	Type	Default	Description
`mode`	Symbol	`:single`	Slider mode: :single for one handle, :range for two handles
`min`	Integer/Float	`0`	Minimum value
`max`	Integer/Float	`100`	Maximum value
`step`	Integer/Float	`1`	Step increment between values
`value`	Integer/Float	`nil`	Current value (single mode, defaults to midpoint)
`value_min`	Integer/Float	`nil`	Lower bound value (range mode, defaults to min + 25% of range)
`value_max`	Integer/Float	`nil`	Upper bound value (range mode, defaults to max - 25% of range)
`label`	String	`nil`	Label text displayed above the slider
`hint`	String	`nil`	Hint text displayed below the slider
`show_value`	Boolean	`false`	Show a live value tooltip above the thumb(s)
`marks`	Boolean/Array	`false`	true for auto step marks, or Array of {value:, label:} hashes
`disabled`	Boolean	`false`	Disable interaction
`name`	String	`nil`	Hidden input name for form submission (single mode)
`name_min`	String	`nil`	Hidden input name for range min value
`name_max`	String	`nil`	Hidden input name for range max value

Changelog v1.0.0

- Initial release with single and range modes
- Step marks support with auto-generation or custom label arrays
- Live value tooltip display above thumb(s)
- Keyboard navigation (Arrow keys, Home, End)
- Touch support for mobile devices
- Hidden inputs for Rails form submission
- Dark mode support with slate palette

Get Full Access

Unlock the source code for this component and all others. One-time payment for lifetime access.

Get Access Now