API Reference
Complete API documentation for components, utilities, and framework core
Slider
Range slider with visual progress bar (uses inline styles for --progress variable)
🔧 Props
| Property | Type | Default | Description |
|---|---|---|---|
| id | string | slider-{timestamp} | Unique identifier |
| label | string | undefined | Label text |
| value | State|number | undefined | Slider value (NOT auto-bound) |
| min | number | 0 | Minimum value |
| max | number | 100 | Maximum value |
| step | number | 1 | Step increment |
| showValue | boolean | true | Show current value |
| valueFormat | string | undefined | 'percent', 'currency', 'distance' |
| oninput* | function | - | Input handler (required - value NOT auto-bound) |
| containerClass | string | - | Container classes (vwfcolor, vwfsize) |
🎨 Utility Classes
| Pattern | Description |
|---|---|
| vwfcolor-{color} | Sets slider color |
| vwfsize-{size} | Controls slider size |
💻 Examples
Volume Slider
javascript•Volume Slider
const volume = van.state(50);
return Slider({
label: 'Volume',
value: volume,
min: 0,
max: 100,
oninput: (e) => volume.val = e.target.value
});▶️ Live Preview
[object Object]
💡 Click "Edit Code" to modify the example
🔄 Click "Apply Changes" to see your modifications
↩️ Click "Reset" to restore original code
💡 Usage Tips
🔗 Related
Explore vwf
Discover what vwf can do