Slider constantly breaks out of container.

[Jakkc]

Slider should stay in container at all times. Currently have to override it with some crazy inline style declarations:

:style="'padding: 0 0 0 10px !important; box-sizing: border-box !important; width: 100% !important;'"

The component needs to be more flexible:

1. auto or fixed numerical value isn't sufficient for controlling the width: why not 100%?
2. box-sizing: content-box shouldn't be used here - this is the reason its constantly breaking out of the container. CSS needs reimplementing.

[Jakkc]

Just to add to the previous comment:

The current CSS implementation prevents both the dot and the rail sitting flush at the edge of a container. Because in the current CSS implementation the dot is positioned centrally on the edge of the rail.

• if the dot is flush at the edge then the rail is inset half the width of the dot
• if the rail is flush at the edge then the dot is offset half its width outside the container

[NightCatSama]

The first one I don't know what trouble you have, the block element should fill the entire line when the width is auto. You can provide an online example or a screenshot.

Regarding the edge, is the slider alignment or the track alignment, i haven't thought of a good solution yet.

[Jakkc]

The component throws an error when you pass auto as a value for the width prop
Invalid prop: type check failed for prop "width". Expected Number with value NaN, got String with value "auto".

Here is a screenshot of how the component renders with the auto prop:

Compared to with my inline CSS overrides:
:style="'padding: 0 10px !important; box-sizing: border-box !important; width: 100% !important;'"

Now for whatever reason the auto prop causes the .vue-slider-process to have the following CSS styles (as a combination of inline and in a class):

{
    position: absolute;
    left: 0%;
    width: 0%;
}

I would expect at a minimum a right value, and absolute declarations usually require a width value to render correctly.

Also, still can't see past box-sizing: content-box being the issue - content-box means any padding / margin is added to the outside of the width. This explains the problem with the dot breaking outside the container, which is why my inline styles fix the problem. There is no need to use content-box here to achieve the intended outcome. In fact, I don't think there is ever a scenario which really requires the use of content-box, this is why generally most projects have box-sizing: border-box declared on *: { }

Regarding the edge, there are definitely solutions!

[NightCatSama]

I am modifying, but I have a problem.

If set to border-box, then padding-top and padding-bottom will not be set (because the height of the track is fixed, and I am now modifying it to support strings, so I can't use numbers to calculate), and if margin is used, there may be overlap problems.

[NightCatSama]

https://jsfiddle.net/j3zkcepL/1/

[Jakkc]

Sorry for the delay in response. The jsfiddle seems to work well - even if you remove the margin and replace it with the padding it still works.

[NightCatSama]

Is your problem solved? 😄

[NightCatSama]

Added the contained property in v3.0.23 to control the alignment of components.

https://nightcatsama.github.io/vue-slider-component/#/basics/simple?hash=contained