Skip to main content

Search and Top Navigation

#9924 open bug ()

Opened March 22, 2014 01:22AM UTC

Last modified May 09, 2017 02:29PM UTC

Slider: Odd value when sliding past min/max value, only when 'step' represents < 1px

Reported by: janicki Owned by:
Priority: minor Milestone: none
Component: ui.slider Version: 1.10.3
Keywords: Cc:
Blocked by: Blocking:

JSFiddle example:

The example link above explains the problem succinctly. Below is just my use case to explain why increasing the step value to represent >= 1px is not an ideal work-around.

My app's slider represents a time range over several months. I want the step to be minutes. Understandably, dragging the handle one pixel changes the value multiple minutes (since there aren't enough pixels to represent every step), but using the keyboard arrows moves per my 1-minute steps. This works as desired: quick moves via mouse, and fine control via keyboard.

On Firefix, the odd behavior is when the handle is at the max. Then, if you click and drag the handle to the right by exactly one pixel, the slider's value goes to less than max. Sliding further to the right pegs at max, as expected. On Safari, the error is on the min side. Looks like a float rounding error?

It's obviously a minor issue, but my users often scroll to/from the max value, and my app appears jittery there. (My workaround will be a separate control for fine adjustments, so I can keep the step value >= 1px.)

Attachments (0)
Change History (3)

Changed March 24, 2014 12:53PM UTC by tj.vantoll comment:1

status: newopen
summary: Odd slider value when sliding past min/max value, only when 'step' represents < 1pxSlider: Odd value when sliding past min/max value, only when 'step' represents < 1px

I can't recreate any issues in Chrome but I can in Firefox. This is likely a subpixel issue.

Changed May 09, 2017 12:39PM UTC by determin1st comment:2

could not to repeat the problem on Firefox 49 and Chrome 54..

Changed May 09, 2017 02:29PM UTC by scottgonzalez comment:3

This is still reproducible. Make sure you follow the instructions in the fiddle exactly.