# @blaze-react/range-slider

> Range slider allows the input of numeric values within a specific range. It can accept a single value, or a range of values (min/max).

Latest version **0.8.0-alpha.112** (published 2025-10-01) · GPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install @blaze-react/range-slider
pnpm add @blaze-react/range-slider
yarn add @blaze-react/range-slider
bun add @blaze-react/range-slider
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.8.0-alpha.112 |
| Published | 2025-10-01 |
| First published | 2020-01-03 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 795.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | byte9 |
| Maintainers | marekb9, mcabrerapf, daoyong, grzegorzi, ishrat, andypail, tanane |

## Links

- npm: https://www.npmjs.com/package/@blaze-react/range-slider
- npm.io page: https://npm.io/package/@blaze-react/range-slider

## Recent versions

- 0.8.0-alpha.112 (latest) — 2025-10-01
- 0.8.0-alpha.117 (alpha) — 2026-03-11
- 0.8.0-alpha.115 — 2026-02-23
- 0.8.0-alpha.114 — 2026-01-08
- 0.8.0-alpha.66 — 2023-10-04
- 0.8.0-alpha.64 — 2023-09-14
- 0.8.0-alpha.60 — 2021-11-30
- 0.8.0-alpha.58 — 2021-11-29
- 0.8.0-alpha.56 — 2021-11-29
- 0.8.0-alpha.52 — 2021-11-29
- 0.8.0-alpha.46 — 2021-10-06
- 0.8.0-alpha.45 — 2021-10-06
- 0.8.0-alpha.44 — 2021-10-06
- 0.8.0-alpha.43 — 2021-10-06
- 0.8.0-alpha.42 — 2021-10-06
- … 55 more at https://npm.io/package/@blaze-react/range-slider/versions

## README

## Description

Range slider allows the input of numeric values within a specific range. It can accept a single value, or a range of values (min/max).

## Usage

- With one moveable hander
```js
<RangeSlider
    name="oneValue"
    maxValue={20}
    minValue={0}
    onChange={() => { }}
    value={15} />
```

- With one moveable handler and custom step value
```js
<RangeSlider
    name="step"
    maxValue={20}
    minValue={0}
    onChange={() => { }}
    step={5}
    value={15} />
```

- With two moveable handlers
```js
<RangeSlider
    name="twoValue"
    maxValue={20}
    minValue={0}
    onChange={() => { }}
    value={{ min: 3, max: 7 }} />
```

- With two moveable handlers and draggable track

```js
<RangeSlider
    draggableTrack
    name="draggableTrack"
    maxValue={20}
    minValue={0}
    onChange={() => { }}
    value={{ min: 3, max: 7 }} />
```

## API

##### RangeSlider can receive a number of `props` as follow:


| NAME            | TYPE          | DEFAULT   | 
| :---            | :---:         | :---:     |
| allowSameValues | Boolean       |   false   | 
| disabled        | Boolean       |   false   | 
| draggableTrack  | Boolean       |   false   |  
| maxValue        | Number        |    10     |  
| minValue        | Number        |     0     |  
| name            | String        |     ''    |  
| onChange        | Function      | () => {}  |  
| step            | Number        |     1     |  
| value           | Number/Object |     0     |

---
_Source: https://npm.io/package/@blaze-react/range-slider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._