README
React HTML Range Input
A simple React component for the HTML range input.
Implementation Guide
1. Installation
Yarn:
yarn add react-html-range
NPM:
npm install react-html-range --save
2. Use
import React from 'react';
// Import the component
import HtmlRange from 'react-html-range';
function MyComponent({ value, onValueChange, stylesObject }) {
// Use the component
return (
<HtmlRange
name="foo"
label="bar"
min={0}
max={10}
step={1}
value={value}
onInputChange={onValueChange}
styles={stylesObject}
/>
);
}
API
Name | Type | Default | Description |
---|---|---|---|
name |
string |
None | Used as the name property on the input. |
label |
string |
None | Used as the label for the input. |
min |
number |
0 | The minimum value of the range. |
max |
number |
10 | The maximum value of the range. |
step |
number |
1 | The incremental value of the range. |
value |
number |
None | The value of the range. |
onInputChange |
function |
None | The callback function for the onChange event on the input. |
styles |
object |
{} |
Controls the styling of the HtmlRange component. See the Styling section for more information. |
Styling
Styling can be done by providing an object to the styles
property of the component. This object accepts three nested objects - wrapperStyles
, labelStyles
, and inputStyles
- that can be used to apply styles to html nodes just as you typically would in React (camel-case CSS properties). The fourth nested object - otherStyles
- can be used to apply further styling.
otherStyles
Name | Default | Purpose |
---|---|---|
ballColor |
#444 |
The color of the range track ball. |
ballSize |
20px |
The width and height of the range track ball. |
ballBorder |
3px solid #fff |
The border surrounding the range track ball. |
trackHeight |
3px |
The height of the range's track. |
trackFilledColor |
#00697b |
The filled color of the track. |
trackEmptyColor |
#e0e0e0 |
The unfilled color of the track. |
Example Styles Object
const styles = {
// CSS property objects
wrapperStyles: { marginTop: '10px' },
labelStyles: { color: 'red' },
inputStyles: { width: '400px' },
// Custom property object
otherStyles: {
ballColor: '#444',
ballSize: '20px',
ballBorder: '3px solid #fff',
trackHeight: '3px',
trackFilledColor: '#00697b',
trackEmptyColor: '#e0e0e0'
}
};