Синхронизировать <Input tyre=“range”/> и store

Приложение должно применять стили к изображению в зависимости от изменений ползунков в .

    class Options extends React.Component {
  constructor(props) {
    super(props);
    this.filterChange = this.filterChange.bind(this);
  }
  componentWillMount() {
    console.log(this.props);
    store.subscribe(() => {});
  }
  filterChange(event) {
    const { value, name } = event.target;
    console.log(this.props);
    this.props.actions(setFilter(value, name));
  }
  render() {
    return (
      <div id="options">
        {OPTIONS.map(el => (
          <label key={uuidv4()} htmlFor={el.name}>
            {el.name}
            <input
              className="slider"
              key={uuidv4()}
              type="range"
              name={el.name}
              id={el.name}
              min={el.min}
              max={el.max}
              step={el.step}
              defaultValue={el.defaultValue}
              onInput={this.filterChange}
            />
          </label>
        ))}
      </div>
    );
  }
}
function mapStateToProps(state) {
  return { state: state.filter };
}
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(setFilter, dispatch),
  };
}
export default connect(mapStateToProps, mapDispatchToProps)(Options);

Так же есть уже готовые фильтры которые при нажатии на них применяются к изображению. Если mapStateToProps привязывает значения filters ползунки не двигаются вообще.

class Preset extends React.Component {
  constructor(props) {
    super(props);
    this.handlePresetSetting = this.handlePresetSetting.bind(this);
  }
  handlePresetSetting() {
    const filter = {
      brightness: this.props.brightness,
      contrast: this.props.contrast,
      invert: this.props.invert,
      saturate: this.props.saturate,
      sepia: this.props.sepia,
    };
    this.props.actions(setPreset(filter));
  }
  render() {
    const {
      name,
      brightness,
      contrast,
      invert,
      saturate,
      sepia,
    } = this.props;
    return (
      <div className="preset">
        <h5>{name}</h5>
        <img
          src="https://hdwallsource.com/img/2014/9/forest-road-background-36158-36982-hd-wallpapers.jpg"
          alt="img"
          height="80"
          width="160"
          style={{
            filter: `brightness(${brightness})
              contrast(${contrast})
              invert(${invert})
              saturate(${saturate})
              sepia(${sepia})`,
            }}
          onClick={this.handlePresetSetting}
        />
      </div>);
  }
}
function mapStateToProps(state) {
  return { state: state };
}
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(setPreset, dispatch),
  };
}
export default connect(mapStateToProps, mapDispatchToProps)(Preset);

Как сделать так чтобы при выборе фильтра ползунки в инпутах меняли своё положение.