shadcn-rails

Slider

An input where the user selects a value from within a given range.

Stimulus: shadcn--slider
Preview 50%

Installation

Add the component to your project:

rails generate shadcn:component slider

Usage

<%= render Shadcn::SliderComponent.new(value: 50, max: 100, class_name: "w-[60%]") %>

Examples

Default

Value 33

With Synced Label

Use data-output-target and data-output-format to sync value labels.

75% 
<div class="space-y-4">
  <div class="flex justify-between">
    <%%= render Shadcn::LabelComponent.new { "Volume" } %>
    <span id="volume-label" class="text-sm text-muted-foreground">75%</span>
  </div>
  <%%= render Shadcn::SliderComponent.new(
    value: 75,
    max: 100,
    data: { "output-target": "volume-label", "output-format": "{value}%" }
  ) %>
</div>

Two-Way Input Binding

Use data-input-target to bind a slider to a number input for two-way sync. Changes to either element update the other.

Change the slider or type a value in the input - both stay in sync. 

<div class="space-y-4 w-full max-w-md">
  <div class="flex items-center justify-between gap-4">
    <%= render Shadcn::LabelComponent.new(for: "brightness-input") { "Brightness" } %>
    <%= render Shadcn::InputComponent.new(
      id: "brightness-input",
      type: "number",
      value: 75,
      min: 0,
      max: 100,
      class_name: "w-20 text-center"
    ) %>
  </div>
  <%= render Shadcn::SliderComponent.new(
    value: 75,
    max: 100,
    data: {
      "input-target": "brightness-input",
      "output-target": "brightness-label",
      "output-format": "{value}%"
    }
  ) %>
  <p class="text-xs text-muted-foreground">
    Change the slider or type a value in the input - both stay in sync.
  </p>
</div>

Custom Range

Use min and max to set a custom range.

20°C
10°C 30°C

With Steps

Use step to set discrete intervals.

3 stars
1 2 3 4 5

Decimal Steps

Use decimal values for step for fine-grained control.

0.5
0 0.5 1 
<div class="space-y-4 w-full max-w-md">
  <div class="flex justify-between">
    <%= render Shadcn::LabelComponent.new { "Opacity" } %>
    <span id="opacity-label" class="text-sm text-muted-foreground">0.5</span>
  </div>
  <%= render Shadcn::SliderComponent.new(
    value: 0.5,
    min: 0,
    max: 1,
    step: 0.1,
    data: { "output-target": "opacity-label", "output-format": "{value}" }
  ) %>
</div>

Disabled

In a Form

Audio Settings

Adjust your audio preferences.

80%
60%
90%

API Reference

API Reference

Prop Type Default Description
name String nil Input name for form submission
value Numeric 0 Current slider value
min Numeric 0 Minimum value
max Numeric 100 Maximum value
step Numeric 1 Step increment
disabled Boolean false Whether the slider is disabled
class_name String nil Additional CSS classes to apply

Stimulus Controller

This component requires JavaScript. The Stimulus controller docs provides interactivity.

Updates the slider's visual fill and supports one-way output sync and two-way input binding.

Installation

Add to your config/importmap.rb:

pin "shadcn-rails", to: "shadcn/index.js"

Then in your app/javascript/controllers/index.js:

import { Application } from "@hotwired/stimulus"
import { registerShadcnControllers } from "shadcn-rails"

const application = Application.start()
registerShadcnControllers(application)

Or import just this controller:

import DocsController from "shadcn-rails/controllers/docs_controller"

application.register("docs", DocsController)

Targets

Name Description
output Element to display the current value (auto-synced on change)

Values

Name Type Default Description
outputFormat String Format string for output ({value} and {percent} placeholders)

Actions

Action Description
updateStyle Updates CSS fill, syncs output target, and updates linked input on change

TypeScript

Type definitions are included. Import types as needed: 

import type { DocsController } from "shadcn-rails"

Data Attributes

These attributes can be added to the slider's native <input type="range"> element:

API Reference

Prop Type Default Description
data-output-target String nil ID of element to display value (one-way: slider → output)
data-output-format String {value} Format string with {value} and {percent} placeholders
data-input-target String nil ID of input element for two-way binding (slider ↔ input)

Accessibility

  • Uses native <input type="range"> for built-in accessibility
  • Keyboard navigation: Arrow keys to adjust value
  • Always pair with a visible label or aria-label
  • Consider showing the current value for screen readers