step labels about slider HOT 6 CLOSED

Needed those too, did some research, so maybe it'll be of some help to someone

You could kinda add some of those (tho styles are unavailable by default as far as I'm concerned), component is using nouislider under the hood so it's options are available.
Try passing options object like so:
<Slider :min="0" :max="1000" :options="{pips: {values: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100], mode: 'positions'}}" />
docs

from slider.

                <Slider
                    v-model="value"
                    :min="0"
                    :max="100"
                    :options="{
                        pips: {
                            values: [
                                0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100,
                            ],
                            mode: 'positions',
                        },
                    }"
                />

<style>
.slider-pips {
    display: flex;
    justify-content: space-evenly;
}
</style>

<style src="@vueform/slider/themes/default.css"></style>

from slider.

is there also a possibility, with which one can block individual steps and only for example 10, 20, 30 ... and not the ones in between like for example 11, 12, 13, ... 21, 22 ... ?

from slider.

for example

from slider.

                <Slider
                    v-model="value"
                    :min="0"
                    :max="100"
                    :options="{
                        pips: {
                            values: [
                                0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100,
                            ],
                            mode: 'positions',
                        },
                    }"
                />

<style>
.slider-pips {
    display: flex;
    justify-content: space-evenly;
}
</style>

<style src="@vueform/slider/themes/default.css"></style>

I found that the following changes made the values line up a bit nicer:

<style>
.slider-pips {
    display: flex;
    justify-content: space-between;
}

.slider-value-large {
    margin-right: -1rem;
}
</style>

from slider.

Once in a while this will be implemented natively. Using it via options with custom CSS is the workaround for now. Duplicate #49.

from slider.