---
name: RangeInput
menu: Components
route: /components/rangeInput
---

import { Playground } from 'docz'
import RangeInput from './'

# RangeInput

Use `RangeInput` for numeric range input fields.

Can be controlled or uncontrolled. For controlled, you must supply the
`value` and `onChange` props.

For uncontrolled, you must omit the `value` prop. And optionally supply the
`defaultValue` prop.

## Import
`import { RangeInput } from '@blasterjs/core'`

## Basic Usage

<Playground>
    <RangeInput width="300px" min={0} max={40} />
</Playground>

## PropTypes
| Prop | Type | Required | Default | Description |
|:-----|:-----|:---------|:--------|:------------|
| `COMMON` | Style Prop |  |  | see [Style Props](/style-props) |
| `POSITION` | Style Prop |  |  | see [Style Props](/style-props) |
| `FLEX_ITEM` | Style Prop |  |  | see [Style Props](/style-props) |
| max | number | no | | passed to underlying `<input type="range" />` |
| min | number | no | | passed to underlying `<input type="range" />` |
| step | number | no | | passed to underlying `<input type="range" />` |
| value | number | no | | passed to underlying `<input type="range" />` |
| defaultValue | number | no | | passed to underlying `<input type="range" />` |
| width | string | no | | |
| thumbColor | string | no | | |
| thumbWidth | string | no | | |
| thumbHeight | string | no | | |
| thumbBorderRadius | string | no | | |
| thumbBorderColor | string | no | | |
| thumbBorderWidth | string | no | | |
| thumbShadow | string | no | | |
| trackColor | string | no | | |
| trackHeight | string | no | | |
| trackBorderRadius | string | no | | |
| trackBorderColor | string | no | | |
| trackBorderWidth | string | no | | |
| trackShadow | string | no | | |
| trackFocusColor | string | no | | |

## Theming

### Schema
```
{
  colors: {
    thumb,
    thumbBorder,
    track,
    trackBorder,
    trackFocus,
  },
  sizes: {
    track: {
      width,
      height
    },
    thumb: {
      width,
      height
    }
  },
  borderWidths: {
    thumb,
    track
  },
  radii: {
    thumb,
    track
  },
  shadows: {
    thumb,
    track
  },
  overrides: css`
    ...
  `
}
```

- [Default theme](https://github.com/raster-foundry/blasterjs/tree/master/packages/core/theme/components/RangeInput)
- [Learn more about themeing](/blaster-theme)