Formulare v1.0.0

Schieberegler

Numerische Werteauswahl über einen ziehbaren Griff. Unterstützt Einzelwert- und Bereichs- (zwei Griffe) Modi, Schrittmarkierungen und Live-Wertanzeige. Funktioniert eigenständig oder in Rails-Formularen mit versteckten Eingabefeldern zur Übermittlung.

Vorschau & 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

Optionen

Name	Typ	Standard	Beschreibung
`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	Typ	Standard	Beschreibung
`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

Änderungsprotokoll 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

Vollzugang erhalten

Schalte den Quellcode für diese und alle anderen Komponenten frei. Einmalige Zahlung für lebenslangen Zugang.

Jetzt Zugang erhalten