admin管理员组

文章数量:1428555

I am working with React, I wanted to use range for some sort of rating purpose but when I use input of type range with datalist, it does not show me range placeholder below. I tried everything but still not working for me.

Exprected Output

Final Output

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

I want also to show a tick mark below my range for better ui purpose.

I am working with React, I wanted to use range for some sort of rating purpose but when I use input of type range with datalist, it does not show me range placeholder below. I tried everything but still not working for me.

Exprected Output

Final Output

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

I want also to show a tick mark below my range for better ui purpose.

  • javascript
  • html
  • reactjs
  • tailwind-css
Share Improve this question edited Apr 9 at 19:47 marc_s 757k184 gold badges1.4k silver badges1.5k bronze badges asked Dec 11, 2024 at 7:09 Mohit PrajapatMohit Prajapat 707 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 1

Your code as such copied below worked here. Please confirm it with the test results enclosed.

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>
    </>
  );
}

Test run

In Goggle Chrome

In Mozilla FireFox

本文标签：

版权声明：本文标题：javascript - Not able to use Input of type of Range with Datalist in React Project integrated with Tailwind &amp; Daisy UI C 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745468657a2659646.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。