Accepted answer

The only problem you were having is that on initial load, your state object was set to access the value in the array correctly. However, everytime the handleChange method fires, it overwrites the state with just an integer, and thus does not do what you are expecting.

If you instead just set the "value" property in your state object to a default value of "0", you can just track the index, and change one more line in your code, and it should work just fine.

First change your state to look like this:

this.state = {
  value: 0

Next, change to this inside your jsx body:

{label} <b className="fw7 pl1">{this.props.value[value]}</b>

This way, you are always going to print out a value, and not an integer to the screen. I think this results in you having to add far less code.

Working Codepen.


Here is the updated code

import React from 'react'

class Range extends React.Component {
  // constructor
  constructor(props) {
    this.state = {
      value: 0

    this.handleChange = this.handleChange.bind(this)

  handleChange(event) {
    this.setState({ value: this.props.value[]})

  render() {
    const { value } = this.state
    const { label } = this.props
    return (
      <div className="mb4">
        <label className="f4 mt0">
          {label} <b className="fw7 pl1">{value}</b>
          className="w-100 appearance-none bg-transparent range-slider-thumb-custom"
          max={this.props.value.length - 1}


export default Range

Related Query

More Query from same tag