1.0.1 • Published 5 years ago
react-html-range v1.0.1
React HTML Range Input
A simple React component for the HTML range input.
Implementation Guide
1. Installation
Yarn:
yarn add react-html-rangeNPM:
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'
}
};