Shadwire
Componentes

Slider

Um slider de um thumb (padrão WAI-ARIA) com valor espelhado em um input hidden.

Instalação

O Shadwire segue o modelo open-code do shadcn/ui: o código-fonte do componente é copiado para a sua aplicação e passa a ser seu. Instale com a CLI:

shadwire add slider --yes

O item slider do registry instala estes arquivos:

  • app/components/ui_component.rb
  • app/components/ui/slider_component.rb
  • app/helpers/ui/slider_helper.rb
  • app/javascript/controllers/ui_slider_controller.js
  • vendor/shadwire/shadwire.css

Este componente usa Stimulus: a aplicação precisa de importmap-rails e stimulus-rails com carregamento automático de controllers.

Ainda não instalou a CLI? gem install shadwire e depois shadwire init.

Uso

<%= ui_slider(min: 0, max: 100, value: 50, name: "volume", label: "Volume") %>

Exemplos

Padrão

Arraste o thumb ou use as setas do teclado.

<%= ui_slider(min: 0, max: 100, step: 1, value: 50, name: "volume", label: "Volume", class: "w-80") %>