Render pointer aligned to track centre (overhanging)

[uecasm]

When you drag the pointer to the left edge, the left edge of the pointer aligns with the left edge of the track.
Similarly, when you drag the pointer to the right edge, the right edge of the pointer aligns with the right edge of the track.

Is there a way to make the pointer centre align to the track instead? So at the floor value, the centre of the pointer is aligned with the left edge of the track, and at the ceil value, the centre of the pointer is aligned with the right edge of the track.

https://jsfiddle.net/mirality/j1ebo2a9/

With this grid background, you can see that while position 5 lines up nicely in both, positions 0 and 10 are well off the centre. You can also see that the limit labels "move sideways" when the pointer reaches them instead of staying in a fixed location. (I realise that it's actually hiding the limit label; it's the effective appearance that I'm referring to.)

I would prefer if the track still extends the full width of the slider (as shown at the bottom of the grid) and the pointer renders "outside" rather than the reverse.

[ValentinH]

Hi,

You can play with the CSS and move the bar:

.rzslider .rz-bar {
  left: 16px;
  width: calc(100% - 32px);
}

[uecasm]

That just shortens the bar, it doesn't do what I wanted. The bar is the correct length already, it's just that the pointer doesn't go to the end of the bar.

I guess changing the width and margins on the slider in combination with that kinda works, but it seems a bit weird.

.rzslider {
  margin: 0 -16px;
  width: calc(100% + 32px);
}

https://jsfiddle.net/mirality/j1ebo2a9/3/

Is there a better way to do it?

[ValentinH]

There is no built-in way to do this. You'll have to workaround using CSS.

[uecasm]

Ok. The changes shown in that fiddle seem to work, at least. But it'd be nice if that was an option.