Как мне оформить псевдоэлемент, основываясь на собственной ценности элемента?

Question

У меня есть сопоставленный массив <input> s, которые установлены в type = "range".Я могу стилизовать их с помощью Sass, чтобы они выглядели так, как я хочу, но я также хочу, чтобы стиль менялся в зависимости от собственного значения ввода.

<div>
    <input
        id={"ts-" + index}
        className="trinary-toggle"
        type="range"
        min="-1"
        max="1"
        step="1"
        value=this.handleValue()
        onChange={(event) => {
            let thisSwitch = document.getElementById("ts-" + index);
            //unsure of what to do here. thisSwitch is undefined
        }}
    />
</div>

и scss, используемых для стилизации соответствующих частей

.trinary-toggle::-webkit-slider-runnable-track {
    background: #CCCCCC;
}

Как изменить стиль фона «trinary-toggle :: - webkit-slider-runnable-track» в зависимости от значения ввода?

Answer 1

Вместо того, чтобы динамически изменять стили, я бы порекомендовал создать несколько классов и применить правильный класс (ы) на основе значения ввода.

Вот краткий пример:

const ternarySliderClasses = ["trinary-toggle-red", "trinary-toggle-yellow", "trinary-toggle-green"];

class TernarySlider extends React.Component {
  state = { value: 0 };

  render() {
    const value = this.state.value;
    const stateClass = ternarySliderClasses[+value + 1];
    return ( 
      <input
        className={classNames('trinary-toggle', stateClass)}
        value={value}
        type="range"
        min="-1"
        max="1"
        step="1"
        onChange={this.handleChange}
      />
    );
  }

  handleChange = (event) => {
    this.setState({
      value: event.target.value
    });
  };
}

ReactDOM.render(<TernarySlider /> , document.getElementById("root"));

.trinary-toggle::-webkit-slider-runnable-track,
.trinary-toggle::-moz-range-track {
  border: 1px solid #333;
}

.trinary-toggle-red::-webkit-slider-runnable-track,
.trinary-toggle-red::-moz-range-track {
  background: #F00;
}

.trinary-toggle-yellow::-webkit-slider-runnable-track,
.trinary-toggle-yellow::-moz-range-track {
  background: #FF0;
}

.trinary-toggle-green::-webkit-slider-runnable-track,
.trinary-toggle-green::-moz-range-track {
  background: #0F0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />