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

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