mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-12 13:18:22 +00:00
116 lines
2.6 KiB
Plaintext
116 lines
2.6 KiB
Plaintext
# Slider
|
|
|
|
<Preview class="w-full max-w-sm">
|
|
<input
|
|
type="range"
|
|
class="input w-full"
|
|
min="0"
|
|
max="100"
|
|
value="50"
|
|
/>
|
|
</Preview>
|
|
|
|
## Usage
|
|
|
|
<Steps>
|
|
<Step title="Include CSS">
|
|
|
|
Import Tailwind and one full Basecoat style bundle.
|
|
|
|
```css
|
|
@import "tailwindcss";
|
|
@import "basecoat-css/vega.css";
|
|
```
|
|
|
|
Or import only the base CSS, Slider component CSS, and one style pack.
|
|
|
|
```css
|
|
@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](/installation).
|
|
|
|
</Step>
|
|
<Step title="Include JavaScript">
|
|
|
|
Copy or serve the full Basecoat JavaScript bundle.
|
|
|
|
```html
|
|
<script src="/assets/js/all.min.js" defer></script>
|
|
```
|
|
|
|
Or copy or serve the Basecoat runtime and Slider script.
|
|
|
|
```html
|
|
<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](/installation).
|
|
|
|
</Step>
|
|
<Step title="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.
|
|
|
|
```html
|
|
<input type="range" class="input w-full" min="0" max="100" value="50" />
|
|
```
|
|
|
|
</Step>
|
|
</Steps>
|
|
|
|
### HTML structure
|
|
|
|
<dl>
|
|
<dt><code><input type="range" class="input"></code></dt>
|
|
<dd>Native range input styled as a slider. Width utilities such as <code>w-full</code> can be added directly.</dd>
|
|
</dl>
|
|
|
|
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
|
|
|
|
<Preview class="w-full max-w-sm">
|
|
<input type="range" class="input w-full" min="0" max="100" value="50" />
|
|
</Preview>
|
|
|
|
### Label
|
|
|
|
<Preview class="w-full max-w-sm">
|
|
<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>
|
|
</Preview>
|
|
|
|
### Disabled
|
|
|
|
<Preview class="w-full max-w-sm">
|
|
<input type="range" class="input w-full" min="0" max="100" value="50" disabled />
|
|
</Preview>
|
|
|
|
### RTL
|
|
|
|
<Preview class="w-full max-w-sm">
|
|
<input type="range" class="input w-full" min="0" max="100" value="50" dir="rtl" />
|
|
</Preview>
|