Set Value and Color Bar Dynamically as parameters

[rutfin]

Hi guys, is it possible to set the BAR colours as parameter when setting the value or at least sending as an Array, so it will work when setting colours dynamically (No depending on CSS class bar-1, bar-2...).

I mean can we set them in the property Value: [{ value: 5, color: red }]

or send a new Array

value:[5, 20, 30] withBars barColour:['red', 'blue', 'yellow']

I Just added a temporary fix.

709 Line

// barColour: React.PropTypes.array,

_renderBar: function (i, offsetFrom, offsetTo) {
      // Set Colour from barColour Array
      const styleColour = this._buildBarStyle(offsetFrom, this.state.upperBound - offsetTo);
      if (this.props.barColour && this.props.barColour.length) {
        styleColour.backgroundColor = this.props.barColour[i];
      }

      return (
        React.createElement('div', {
          key: 'bar' + i,
          ref: 'bar' + i,
          className: this.props.barClassName + ' ' + this.props.barClassName + '-' + i,
          style: styleColour
        })
      );
},

[vibhas77]

Hi,

I have also been looking for similar solutions. Did it work?

[mpowaga]

You can already do that with custom handles, e.g.

React.render(
  <ReactSlider withBars>
    <div style={{ backgroundColor: 'red' }}>1</div>
    <div style={{ backgroundColor: 'green' }}>2</div>
    <div style={{ backgroundColor: 'blue' }}>3</div>
  </ReactSlider>,
  document.body
);