如何在一个页面中显示多个滑块

<div id="slider-container">
  <div class="slider"></div>
  <div class="slider"></div>
  <div class="slider"></div>
  <!-- 添加更多滑块 -->
</div>

.slider {
  width: 200px;
  height: 20px;
  background-color: #ccc;
  border: 1px solid #000;
  /* 添加其他样式 */
}

// 使用jQuery UI的滑块组件
$(function() {
  $(".slider").slider();
});

// 使用React的滑块组件
class Slider extends React.Component {
  render() {
    return <input type="range" />;
  }
}

ReactDOM.render(<Slider />, document.getElementById("slider-container"));