# Range & feedback
## Installation
Add any component with the CLI (drops a ready-to-edit starter into your app) - or
add the whole family at once:
Prefer to see them first? `npx @svgrid/ui try range` opens the whole family in a sandbox - no project needed.
They all ship free in the `@svgrid/grid` package, so you can also install it and
import them directly:
## SvSlider
A single or dual-thumb range slider (ARIA slider) with steps, tick marks,
keyboard and pointer drag; horizontal or vertical.
The examples on this page import from `@svgrid/grid`:
```svelte
```
```svelte
(volume = v)} showValue ticks={5} />
(priceRange = v)} showValue />
```
Props: `value` (number | [number, number]), `range`, `onChange`, `min`, `max`,
`step`, `ticks` (count or values[]), `showValue`, `orientation`
(`horizontal` | `vertical`), `formatValue`, `disabled`. Keyboard: arrows step,
PageUp/Down step ×10, Home/End jump to bounds.
## SvGauge
A radial arc gauge (SVG) rendering a value within `[min, max]`, with optional
colored threshold bands, a needle and a center label. A display control.
```svelte
```
Props: `value`, `min`, `max`, `sweep` (degrees, default 270), `bands`, `needle`,
`label`, `unit`, `size`, `thickness`, `formatValue`. Exposes ARIA `meter` with a
clamped `aria-valuenow`.
## Component guides
Each component has its own full tutorial with props, keyboard behaviour and
recipes:
- [SvSlider](https://svgrid.com/docs/help/ui-components/sv-slider/) - a single or dual-thumb range slider.
- [SvGauge](https://svgrid.com/docs/help/ui-components/sv-gauge/) - a radial arc gauge for a value.
- [SvProgress](https://svgrid.com/docs/help/ui-components/sv-progress/) - a linear progress bar, determinate or indeterminate.
- [SvCircularProgress](https://svgrid.com/docs/help/ui-components/sv-circular-progress/) - a circular ring progress indicator.
- [SvSparkline](https://svgrid.com/docs/help/ui-components/sv-sparkline/) - a tiny inline line/area/bar chart.
- [SvStat](https://svgrid.com/docs/help/ui-components/sv-stat/) - a KPI card with an auto-coloured delta.
## More examples
### Range & feedback
SvSlider (single or dual-thumb range, ticks, keyboard, vertical) and SvGauge (radial arc with threshold bands, needle, half sweep). Theme-driven value controls, standalone or in-grid.
> Live demo: Range & feedback - https://svgrid.com/demos/256-range-feedback/
## A two-handle range
`range` turns one handle into two and the value into a pair. `formatValue` is
what makes the readout mean something - a raw number beside a slider rarely
does.
```svelte
(budget = v as [number, number])}
range
min={80000}
max={200000}
step={5000}
showValue
formatValue={money}
label="Salary band"
/>
```
---
SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/ui-components/range/ . All docs: https://svgrid.com/llms.txt