step labels

[HerrSammyDE]

could you add such "step labels"?

[pixlo]

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

[sherwinwater]

                <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>

[HerrSammyDE]

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 ... ?

[HerrSammyDE]

for example

[dtice]

                <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>

[adamberecz]

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