Volume slider
import { Slider } from "@combric/react";
export function Example() {
return <Slider aria-label="Volume" defaultValue="50" min="0" max="100" />;
}Slider
Native horizontal range input.
@combric/react · v1.1.1 · Current
Import and usage
import { Slider } from "@combric/react";Load the native stylesheet with @import "@combric/react/css";. This path does not require Tailwind.
Examples
Disabled slider
import { Slider } from "@combric/react";
export function Example() {
return <Slider aria-label="Volume" defaultValue="50" min="0" max="100" disabled />;
}Determinate fill and range values
0 of 100
25 of 100
50 of 100
75 of 100
100 of 100
50 of 20 to 80
import { Slider } from "@combric/react";
export function Example() {
return (
<div style={{ display: "grid", gap: "0.75rem" }}>
<div style={{ display: "grid", gap: "0.25rem" }}><span>0 of 100</span><Slider aria-label="0 percent" min="0" max="100" defaultValue="0" /></div>
<div style={{ display: "grid", gap: "0.25rem" }}><span>25 of 100</span><Slider aria-label="25 percent" min="0" max="100" defaultValue="25" /></div>
<div style={{ display: "grid", gap: "0.25rem" }}><span>50 of 100</span><Slider aria-label="50 percent" min="0" max="100" defaultValue="50" /></div>
<div style={{ display: "grid", gap: "0.25rem" }}><span>75 of 100</span><Slider aria-label="75 percent" min="0" max="100" defaultValue="75" /></div>
<div style={{ display: "grid", gap: "0.25rem" }}><span>100 of 100</span><Slider aria-label="100 percent" min="0" max="100" defaultValue="100" /></div>
<div style={{ display: "grid", gap: "0.25rem" }}><span>50 of 20 to 80</span><Slider aria-label="50 percent in offset range" min="20" max="80" defaultValue="50" /></div>
</div>
);
}Public API
| Name |
|---|
Slider |
| Property / capability | Published contract |
|---|---|
| Contract | min/max/step |
| Contract | value/defaultValue |
| Contract | native range props |
Accessibility
Requires an accessible name and preserves native form, validation, and range semantics.
Keyboard
Platform-native range keyboard behavior.
CSS and customization
Combric classes and canonical --combric-* variables provide the package presentation. Consumer className extends the required class; it does not replace the component contract.