Ticks at the left and right ends

[dongbohu]

Is it possible to put the two ticks at the left and right ends at EXACTLY the two ends of the bar? By default the tick at the left end has some offset to the right side, and the tick on the right has some offset to the left side. I customized the CSS by:

.rzslider .rz-ticks .rz-tick {
  margin-left: 0px;
}

It removes the offset of the tick on left side, but the line of
margin-right: 0px;
doesn't seem to affect the tick at the right end.

Thanks.

[ValentinH]

The offset reason is because of the slider handle size. If you want the slider handle to be align with ticks, you need this offset currently. Also this is because currently, the handle is left aligned to the slider extremity, but it could be a solution to center it instead.

[ValentinH]

This could be a new option to configure the behavior.

[dongbohu]

Thank you for your prompt reply. I look forward to the new option.

[ValentinH]

Would you like to implement it?

[dongbohu]

I prefer not, because I am very busy recently.

[ValentinH]

Me too so don't expect it to done soon ;)

[DeusEx-Machina]

I would happily add this if you still are wanting this feature implemented.

[ValentinH]

Sure! Contributions are always welcome! ;)

Le jeu. 17 nov. 2016 23:12, Cole Mecum notifications@github.com a écrit :

I would happily add this if you still are wanting this feature
implemented.

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
#447 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACjfUgI84zh0Wodr3QU1hN7ElUicGbADks5q_NFhgaJpZM4KnXxm
.

[mtlehtin]

You can easily achieve this with CSS by reducing the bar width. And then adding left margin accordingly to that change. Needed width change depends on the handle size.

.rz-bar {
    width: calc(100% - 30px);
    margin-left: 15px;
 }

[ValentinH]

Great answer @mtlehtin .

Just to be sure that the new style is applied after the default ones:

.rzslider .rz-bar {
    width: calc(100% - 2 * 15px);
    margin-left: 15px;
 }