Component

Slider

Name: Forge
Rating: 5 (1 reviews)
Author: Webba Creative

Range slider for selecting numeric values. Supports marks, tooltips, and custom formatting.

tsx

import { Slider, RangeSlider } from 'wss3-forge'

Usage

•

Use for numeric values within a range

•

Add marks for predefined stops

•

Use formatValue for custom display (%, €, etc.)

•

RangeSlider for selecting a range

Volume50

Examples

Basic Slider

Volume50

tsx

1<Slider label="Volume" value={volume} onChange={setVolume} />

With Custom Range

Price$500

$500

tsx

1<Slider
2  label="Price"
3  min={0}
4  max={1000}
5  step={50}
6  value={price}
7  onChange={setPrice}
8  formatValue={(v) => `$${v}`}
9/>

Sizes

Small30

Medium50

Large70

tsx

1<VStack gap="lg">
2  <Slider size="sm" label="Small" value={30} onChange={...} />
3  <Slider size="md" label="Medium" value={50} onChange={...} />
4  <Slider size="lg" label="Large" value={70} onChange={...} />
5</VStack>

Custom Color

Progress75

tsx

1<Slider
2  label="Progress"
3  value={progress}
4  onChange={setProgress}
5  color="var(--color-success)"
6/>

Select

Switch

Last updated: December 2025