Developer Docs
Quick reference guides with props tables, usage examples, and best practices for rapid development
Slider
Range slider with visual progress bar (uses inline styles for --progress variable)
Slider
Range input slider with visual progress bar, value display, and min/max range indicators. Uses CSS variables (--vwf-color, --vwf-size, --progress) for theming and styling.
Live Example
🔧 Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | van.State | number | — | Slider value (native HTML attribute) |
| min | number | 0 | Minimum value |
| max | number | 100 | Maximum value |
| step | number | 1 | Step increment |
| disabled | boolean | false | Disabled state |
| oninput | Function | — | Input event handler (must update state manually) |
| id | string | auto | Unique identifier (auto-generated if not provided) |
| label | string | — | Label text for the slider |
| showValue | boolean | true | Show current value display |
| showRange | boolean | false | Show min/max range labels |
| valueFormat | string | — | Format type: 'percent', 'currency', 'distance' |
| prefix | string | — | Value prefix (e.g., '#39; for currency) |
| unit | string | — | Value unit (e.g., 'km', 'miles') |
| formatter | Function | — | Custom value formatter function (takes priority over valueFormat) |
| containerClass | string | 'vwfcolor-sky vwfsize-md' | Container wrapper classes (use vwfcolor-* and vwfsize-* for theming) |
| labelClass | string | — | Label classes |
| valueClass | string | — | Value display classes |
| rangeClass | string | — | Range label classes |
💻 Basic Usage
Simple Slider
const brightness = van.state(50);
Slider({
label: 'Brightness',
value: brightness,
containerClass: 'vwfcolor-sky',
oninput: e => brightness.val = e.target.value
})𐄷 Value Formatting
Distance with Unit
Slider({
label: 'Search Radius',
value: radius,
min: 1,
max: 50,
unit: 'km',
showRange: true,
containerClass: 'vwfcolor-earth',
oninput: e => radius.val = e.target.value
})Percentage Format
Slider({
label: 'Progress',
value: progress,
valueFormat: 'percent',
showRange: true,
containerClass: 'vwfcolor-success',
oninput: e => progress.val = e.target.value
})Currency with Prefix
Slider({
label: 'Price',
value: price,
min: 0,
max: 1000,
step: 50,
prefix: '#39;,
showRange: true,
containerClass: 'vwfcolor-sunset',
oninput: e => price.val = e.target.value
})Custom Formatter
Slider({
label: 'Temperature',
value: temperature,
min: -10,
max: 40,
formatter: v => `${v}°C`,
showRange: true,
containerClass: 'vwfcolor-sunrise',
oninput: e => temperature.val = e.target.value
})📏 Size Variants
Control slider size using vwfsize-* utilities on containerClass.
🎨 Color Variants
Use vwfcolor-* utilities on containerClass for theming. The progress bar color matches the slider thumb color automatically.
👁️ Show/Hide Options
Hide Value Display
Slider({
label: 'No Value',
value: volume,
showValue: false,
containerClass: 'vwfcolor-sky',
oninput: e => volume.val = e.target.value
})Show Range Labels
Slider({
label: 'With Range',
value: radius,
showRange: true,
containerClass: 'vwfcolor-earth',
oninput: e => radius.val = e.target.value
})🚫 Disabled State
Slider({
label: 'Disabled Slider',
value: volume,
disabled: true,
showRange: true,
containerClass: 'vwfcolor-sky',
oninput: e => volume.val = e.target.value
})⚡️ Best Practices
✓ Do This
✓Always provide oninput handler
- Slider does not auto-bind state. You must update state manually in the oninput handler.
✓Use appropriate step values
- For decimal values (like volume 0-10), use step: 0.25 or 0.5 for smooth adjustments.
✓Show range labels for context
- Use showRange: true when min/max values provide important context (distances, prices).
✓Use formatter for complex displays
- Custom formatter prop takes priority over valueFormat for complete control over value display.
✓Apply colors via containerClass
- Use vwfcolor-* utilities on containerClass (not class) for consistent theming.
✗ Avoid This
✗Don't use class for color/size
- Use containerClass with vwfcolor-* and vwfsize-* utilities instead.
✗Don't forget min/max constraints
- Always set appropriate min/max values to prevent invalid ranges.
✗Don't use both valueFormat and formatter
- Formatter takes priority, so valueFormat will be ignored if both are provided.
✨ Key Features
⭑CSS Variable Sizing
- Uses --vwf-size via vwfsize-* utilities for consistent, scalable sizing.
⭑CSS Variable Coloring
- Uses --vwf-color via vwfcolor-* utilities for theming. Value display auto-matches slider color.
⭑Dynamic Progress Bar
- Progress bar dynamically updates via --progress CSS variable set through inline style.
⭑Multiple Format Types
- Built-in formats: percent, currency, distance, custom. Supports custom formatter function.
⭑Custom Formatter Support
- Formatter function prop takes priority over valueFormat for complete display control.
⭑Optional Value Display
- Toggle value display with showValue prop. Value color auto-matches slider theme.
⭑Optional Range Labels
- Show min/max labels with showRange prop for better context.
⭑Native HTML5 Range Input
- Built on native range input for full accessibility and keyboard navigation.
⭑Disabled State Support
- Visual feedback with opacity reduction when disabled.
⭑Auto-Generated IDs
- Automatic unique ID generation if not provided, preventing console errors.
⭑Full Tailwind Override
- filterClassName enables complete customization with any Tailwind utility classes.
Explore More Components
Browse other component categories