Как настроить простой HTML Range Slider в React

Question

Я впервые использую ползунок диапазона в реакции. Я использую ползунок basi c html, реагируя так:

<input name="cost" id="range"
       type="range" 
       value={this.props.cost}
       min="0" max="100000"
       step="1" onChange={this.props.updateRange}
 />

и применил к нему немного css, и теперь он выглядит так:

Но я хочу настроить его следующим образом:

Мне нужна помощь в двух вещах:

1. как настроить css вот так
2. текущее значение, которое будет отображаться под ползунком и перемещаться вместе с ним (в React)

Пожалуйста, помогите !!!