search

twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
https://getbootstrap.com
MIT License
170.53k stars 78.85k forks source link

Form-range remove list #39254

Open nbao opened 1 year ago

nbao commented 1 year ago

Prerequisites

Describe the issue

If we have data list with form-range slider doesn't work with step

<input type="range" class="form-range" min="0" max="100" step="10" list="number" />
<datalist id="number">
  <option>10</option> 
  <option label="30">30</option> 
  <option>50</option> 
  <option>70</option>
  <option>90</option> 
</datalist>

Reduced test cases

https://codepen.io/lewisSME/pen/YQpWmb

What operating system(s) are you seeing the problem on?

Windows, macOS, Android, iOS, Linux

What browser(s) are you seeing the problem on?

Chrome, Safari, Firefox, Microsoft Edge, Opera

What version of Bootstrap are you using?

5.3.2

AnkurDhattarwal commented 1 year ago

sir can you please assign this issue to me :). I can do it.

nbao commented 1 year ago

you can try with this code you can see bug


With bootstrap 5
<input type="range" class="form-range" min="0" max="100" step="10" list="number" />
<br/>
without bootstrap form-range
<input type="range" min="0" max="100" step="10" list="number" />
<datalist id="number">
  <option>10</option> 
  <option label="30">30</option> 
  <option>50</option> 
  <option>70</option>
  <option>90</option> 
</datalist>
julien-deramond commented 1 year ago

Thanks for opening this issue @nbao. I'm not sure to catch the issue here. If I'm not mistaken, your CodePen example is just pure HTML code and doesn't load Bootstrap, and there's no step used contrary to what's in your description. Could you please enhance your description?

nbao commented 1 year ago

Yes you can compare here https://codepen.io/Bo-NGUYN-Ngc/pen/YzdOXxM You can see with bootstrap class form-range and not bootstrap

mdo commented 1 year ago

Damn that's so wild, I had no idea you could do that. I don't know if we'd be able to keep that with the custom styles we apply to the range input.

VibrantConcepts commented 1 year ago

unsubscribe

On Fri, Oct 20, 2023, 03:18 Mark Otto @.***> wrote:

Damn that's so wild, I had no idea you could do that. I don't know if we'd be able to keep that with the custom styles we apply to the range input.

— Reply to this email directly, view it on GitHub https://github.com/twbs/bootstrap/issues/39254#issuecomment-1771950829, or unsubscribe https://github.com/notifications/unsubscribe-auth/A324RXVUEC3Q3B7QNWFZEWLYAHNQFAVCNFSM6AAAAAA5MRC3MGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONZRHE2TAOBSHE . You are receiving this because you are subscribed to this thread.Message ID: @.***>