在与 Tailwind 和 Daisy UI CSS 集成的 React 项目中无法使用带有 Datalist 的 Range 类型的输入

Question

我正在使用 React，我想使用范围来达到某种评级目的，但是当我使用带有数据列表的范围类型输入时，它不会在下面显示范围占位符。我尝试了一切，但仍然不适合我。

<input type="range" min={0} max="10" list="tickmarks" className="range mb-3" step="0.5"/>
<datalist id="tickmarks">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
<option value="6"></option>
<option value="7"></option>
<option value="8"></option>
<option value="9"></option>
</datalist>

我还想在我的范围下方显示一个刻度线，以获得更好的用户界面。

Answer 1

您在下面复制的代码在这里工作。请附上测试结果进行确认。

App.js

export default function App() {
  return (
    <>
      <input
        type="range"
        min={0}
        max="10"
        list="tickmarks"
        className="range mb-3"
        step="0.5"
      />
      <datalist id="tickmarks">
        <option value="1"></option>
        <option value="2"></option>
        <option value="3"></option>
        <option value="4"></option>
        <option value="5"></option>
        <option value="6"></option>
        <option value="7"></option>
        <option value="8"></option>
        <option value="9"></option>
      </datalist>
    </>
  );
}

试运行

在 Goggle Chrome 中

在 Mozilla FireFox 中