Как css диапазон ввода типа?

Question

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import SoundCloudAudio from 'soundcloud-audio';
import ClassNames from 'classnames';
import { VolumeIconLoudSVG, VolumeIconMuteSVG } from './Icons';

class VolumeControl extends Component {
  handleVolumeChange(e) {
    const {
      onVolumeChange,
      onToggleMute,
      soundCloudAudio,
      isMuted
    } = this.props;
    const xPos = (e.target.value / 100);
    const mute = (xPos <= 0 && !isMuted);

    if (soundCloudAudio && !isNaN(soundCloudAudio.audio.volume)) {
      soundCloudAudio.audio.volume = xPos;
      soundCloudAudio.audio.muted = mute;
    }

    if (mute !== isMuted) {
      onToggleMute && onToggleMute.call(this, mute, e);
    }

    onVolumeChange && onVolumeChange.call(this, xPos, e);
  }

  handleMute(e) {
    const { onToggleMute, soundCloudAudio } = this.props;

    if (soundCloudAudio && !isNaN(soundCloudAudio.audio.muted)) {
      soundCloudAudio.audio.muted = !soundCloudAudio.audio.muted;
    }

    onToggleMute && onToggleMute.call(this, !this.props.isMuted, e);
  }

  render() {
    const { className, buttonClassName, rangeClassName, volume, isMuted } = this.props;

    let value = volume * 100 || 0;

    if (value < 0 || isMuted) {
      value = 0;
    }

    if (value > 100) {
      value = 100;
    }

    const classNames = ClassNames('sb-soundplayer-volume', className);
    const buttonClassNames = ClassNames('sb-soundplayer-btn sb-soundplayer-volume-btn', buttonClassName);
    const rangeClassNames = ClassNames('sb-soundplayer-volume-range', rangeClassName);

    return (
      <div className={classNames}>
        <button className={buttonClassNames} onClick={::this.handleMute}>
          {isMuted ? <VolumeIconMuteSVG /> : <VolumeIconLoudSVG />}
        </button>
        <div>
          <input className={rangeClassNames} type="range" min="0" max="100" step="1" value={value} onChange={::this.handleVolumeChange} />
        </div>
      </div>
    );
  }
}

VolumeControl.propTypes = {
  className: PropTypes.string,
  buttonClassName: PropTypes.string,
  rangeClassName: PropTypes.string,
  volume: PropTypes.number,
  onVolumeChange: PropTypes.func,
  onToggleMute: PropTypes.func,
  soundCloudAudio: PropTypes.instanceOf(SoundCloudAudio)
};

VolumeControl.defaultProps = {
  volume: 1,
  isMuted: 0
};

export default VolumeControl;

.sb-soundplayer-volume {
  position: relative;
}
.sb-soundplayer-volume:hover div {
  width: 80px;
}
.sb-soundplayer-volume div {
  overflow: hidden;
  width:0;
  transition: width .2s ease-out;
  position: relative;
}
.sb-soundplayer-volume-range {
  -webkit-appearance: none;
  width: 98%;
}
.sb-soundplayer-volume-range:focus {
  outline: none;
}

/* track */
.sb-soundplayer-volume-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.2em;
  cursor: pointer;
  animate: 0.2s;
  background: var(--sb-volume-track-color);
  border-radius: 1.3px;
}
.sb-soundplayer-volume-range::-moz-range-track {
  width: 100%;
  height: 0.2em;
  cursor: pointer;
  animate: 0.2s;
  background: var(--sb-volume-track-color);
  border-radius: 1.3px;
}
.sb-soundplayer-volume-range::-ms-track {
  width: 100%;
  height: 0.2em;
  cursor: pointer;
  animate: 0.2s;
  background: var(--sb-volume-track-color);
  border-radius: 1.3px;
}

/* thumb dial */
.sb-soundplayer-volume-range::-moz-range-thumb {
  height: 1em;
  width: 1em;
  border-radius: 1em;
  background: var(--sb-volume-dial-color);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -0.4em;
}
.sb-soundplayer-volume-range::-webkit-slider-thumb {
  height: 1em;
  width: 1em;
  border-radius: 1em;
  background: var(--sb-volume-dial-color);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -0.4em;
}
.sb-soundplayer-volume-range::-ms-thumb {
  height: 1em;
  width: 1em;
  border-radius: 1em;
  background: var(--sb-volume-dial-color);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -0.4em;
}

/* progress fill */
.sb-soundplayer-volume-range::-ms-fill-lower {
  background: var(--sb-volume-progress-color);
}

:root {
  --sb-volume-dial-color: #FC561E;
  --sb-volume-track-color: #DDD;
  --sb-volume-progress-color: #FC561E;
}
About

<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>

введите описание изображения здесь

У меня есть проблема CSS, как на изображении выше, это происходит только на iPhone. Фон ввода белый, и это не происходит в браузерах и Android устройствах. Как сделать CSS с белого фона на другой цвет фона на iPhone? Ждем помощи. спасибо всем.

Я использую реагирующий звуковой плеер KOSMETISM.