when `@slider-horizontal-width:` is `100%;` the slider generate horizontal scrolls

[andresgalante]

If you set @slider-horizontal-width: to 100%; the slider-tick-label goes beyond the container because the first and last tick label have the same width as the others.

[seiyria]

Please provide a jsfiddle.

On Wed, Nov 1, 2017, 09:22 Andres Galante [email protected] wrote:

If you set @slider-horizontal-width: to 100%; the slider-tick-label goes beyond the container because the first and last tick label have the same width as the others.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/seiyria/bootstrap-slider/issues/797, or mute the thread https://github.com/notifications/unsubscribe-auth/AAum2eRUduCLwnNQuL3D0YF9boKiIZnrks5syH6UgaJpZM4QORRg .

[andresgalante]

Sorry, here it is:

https://codepen.io/andresgalante/pen/eepdNz?editors=1100

[andresgalante]

I solved it flexing the container:

.slider-tick-label-container {
  display: flex;
  justify-content: space-between;
}

and removing the js that defines the width and margin left.

[LuckyLuzz]

@andresgalante Could you comment on which lines you did remove from js?

EDIT:

I removed from bootstrap-slider.min.js V10.3.2

var g, h = "vertical" === this.options.orientation ? "height" : "width";
                            g = "vertical" === this.options.orientation ? "marginTop" : this.options.rtl ? "marginRight" : "marginLeft";

and added to bootstrap-slider.min..css

.slider.slider-horizontal {
  width: 100%;
  margin-bottom:  20px
}

.slider.slider-horizontal .slider-tick-label-container {
  display: flex;
  justify-content: space-between;
}

Now it works in a Flexbox environment.

[Pontax]

Is it possible to include this change in master branch ?

[seiyria]

If you submit a pull request it can be reviewed.

On Tue, Jan 22, 2019, 01:42 Pontax <[email protected] wrote:

Is it possible to include this change in master branch ?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/seiyria/bootstrap-slider/issues/797#issuecomment-456300348, or mute the thread https://github.com/notifications/unsubscribe-auth/AAum2QNTuAksbNtPjqA4OtdszOW65Nl9ks5vFsDbgaJpZM4QORRg .