Slider

<input
  type="range"
  class="input w-full"
  min="0"
  max="100"
  value="50"
/>

Usage

Include CSS

Import Tailwind and one full Basecoat style bundle.

@import "tailwindcss";
@import "basecoat-css/vega.css";

Or import only the base CSS, Slider component CSS, and one style pack.

@import "tailwindcss";
@import "basecoat-css/base.css";
@import "basecoat-css/components/range.css";
@import "basecoat-css/styles/vega.css";

Slider uses the Range component CSS.

Using CDN or bundler imports? See the Installation page.

Include JavaScript

Copy or serve the full Basecoat JavaScript bundle.

<script src="/assets/js/all.min.js" defer></script>

Or copy or serve the Basecoat runtime and Slider script.

<script src="/assets/js/basecoat.min.js" defer></script>
<script src="/assets/js/range.min.js" defer></script>

Using CDN or bundler imports? See the Installation page.

Add your slider HTML

Use a native <input type="range" class="input">. Include range.js so Basecoat can keep the filled track in sync with the input value.

<input type="range" class="input w-full" min="0" max="100" value="50" />

HTML structure

<input type=“range” class=“input”>: Native range input styled as a slider. Width utilities such as w-full can be added directly.

Basecoat intentionally uses the native range input. Unlike shadcn/ui’s Base UI slider, it does not support multiple thumbs or vertical orientation.

Examples

Default

<input type="range" class="input w-full" min="0" max="100" value="50" />

Label

Temperature50

<div class="grid w-full gap-1 max-w-sm">
  <div class="flex items-center justify-between gap-2">
    <label class="label" for="temperature">Temperature</label>
    <output class="text-sm text-muted-foreground" for="temperature">50</output>
  </div>
  <input
    id="temperature"
    type="range"
    class="input w-full"
    min="0"
    max="100"
    value="50"
    oninput="this.previousElementSibling.querySelector('output').value = this.value"
  />
</div>

Disabled

<input type="range" class="input w-full" min="0" max="100" value="50" disabled />

RTL

<input type="range" class="input w-full" min="0" max="100" value="50" dir="rtl" />