Пользовательский интерфейс материала: как получить значения ползунка с помощью события onClick кнопки?

У меня есть форма, состоящая из нескольких ползунков с кнопкой отправки в конце.

В нереагирующей среде у меня обычно была бы функция, вызываемая для свойства кнопки onClick, где она перебирала бы все ползунки и переходила бы document.getElementById('mySliderIdX').value.

Но с Material UI в React я не могу получить доступ к значениям ползунка таким образом. Если я попытаюсь сделать это, я получу элемент span без свойства value.

Как получить значение всех моих ползунков с помощью кнопки?

Мой код здесь:

let getSliderValues = function (arrOfIDs) {
  let ratings = {}
  arrOfIDs.forEach(name_id => {    
    let slider = document.getElementsByName(name_id);
    ratings[name_id] = slider.value // this is undefined
  });
  console.info("slider values: ",ratings)
}

class MySliders extends Component(){
this.sliders = ["a","b","c"]

render(){
  return(
    <div>
      <Slider id = {this.sliders[0]} />
      <Slider id = {this.sliders[1]} />
      <Slider id = {this.sliders[2]} />
      <button onClick = {e=>this.getValues(this.sliders)}>submit</button>
    </div>
  )
}
}