react-html-range

A simple React component for the HTML range input.

Usage no npm install needed!

<script type="module">
  import reactHtmlRange from 'https://cdn.skypack.dev/react-html-range';
</script>

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