basecoat/docs/src/components/slider.md

templateEngineOverride, layout, title, description, toc

templateEngineOverride	layout	title	description	toc
njk	layouts/page.njk	Slider	An input where the user selects a value from within a given range.	label id children Usage usage label id HTML + JavaScript usage-html-js label id HTML structure usage-structure label id children Examples examples label id Default example-default label id Controlled Label example-controlled-label label id Disabled example-disabled label id RTL example-rtl

{% from "macros/code_preview.njk" import code_preview %} {% from "macros/code_block.njk" import code_block %}

{% set code %}<input type="range" class="input w-full" min="0" max="100" value="50"

{% endset %} {{ code_preview("slider", code, "w-full max-w-sm") }}

Usage

HTML + JavaScript

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

{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/basecoat.min.js" defer></script>

<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/range.min.js" defer></script>{% endset %}

{{ code_block(code_script | prettyHtml, "html") }}

Components with JavaScript {% lucide "arrow-right" %} range.js {% lucide "arrow-right" %}

{{ code_block(code | prettyHtml, "html") }}

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

{% set code %}{% endset %} {{ code_preview("slider-default", code, "w-full max-w-sm") }}

Controlled Label

{% set code %}

Temperature 50

{% endset %} {{ code_preview("slider-controlled-label", code, "w-full") }}

Disabled

{% set code %}{% endset %} {{ code_preview("slider-disabled", code, "w-full max-w-sm") }}

RTL

{% set code %}

{% endset %} {{ code_preview("slider-rtl", code, "w-full") }}