React Range Slider Example

This React component example renders a range slider input field with a range of 0 to 20. The Range component is a child of the App component and is passed a prop called “range” and a callback function called “updateRange”. When the slider is moved, the updateRange function is called with the new value, which is then passed back up to the App component and stored in its state as “rangeVal”. Finally, the App component is rendered to the HTML document through the root element.

How to Create React Range Slider Example

First of all, load the following assets into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

Create the HTML structure as follows:

<div id="root"></div>

Style the range slider using the following CSS styles:

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  display: flex;
  align-items: center;
  padding: 5px;
}
div #output {
  background: lightblue;
  color: #fff;
  border-radius: 2px;
  padding: 3px 7px;
  margin: 0px 10px;
  text-align: center;
  position: relative;
}
div #output::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  height: 0;
  width: 0;
  border: solid 6px lightblue;
  z-index: -1;
  border-top-color: white;
  border-bottom-color: white;
  border-left-color: white;
}

/* CHROME */
#range {
  -webkit-appearance: none;
  outline: none;
  background: lightblue;
  height: 6px;
  width: 200px;
  border-radius: 5px;
}
#range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: lightblue;
}

/* FIREFOX */
#range::-moz-range-thumb {
  border: none;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: lightblue;
  cursor: pointer;
}

#range::-moz-range-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  background: lightblue;
  border-radius: 5px;
}

Now, load the React JS by adding the following CDN links before closing the body tag:

<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script>

Finally, add the following JavaScript function:

class Range extends React.Component {
  constructor(props) {
    super(props);
    this.updateRange = this.updateRange.bind(this);
  }

  updateRange(e) {
    this.props.updateRange(e.target.value);
  }

  render() {
    // console.log(this.props);
    const { range } = this.props;
    return /*#__PURE__*/(
      React.createElement("div", null, /*#__PURE__*/
      React.createElement("input", { id: "range", type: "range",
        value: range,
        min: "0",
        max: "20",
        step: "1",
        onChange: this.updateRange }), /*#__PURE__*/

      React.createElement("span", { id: "output" }, range)));


  }}


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rangeVal: 0 };

    this.updateRange = this.updateRange.bind(this);
  }

  updateRange(val) {
    this.setState({
      rangeVal: val });

  }

  render() {
    const { rangeVal } = this.state;
    return /*#__PURE__*/(
      React.createElement(Range, { range: rangeVal, updateRange: this.updateRange }));

  }}


const root = document.getElementById('root');
ReactDOM.render( /*#__PURE__*/React.createElement(App, null), root);

That’s all! hopefully, you have successfully integrated this React range slider component into your project. If you have any questions or suggestions, feel free to comment below.