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'
    }
};

Creator

Curtis

Usage no npm install needed!