NightCatSama/vue-slider-component

Multiline label (line-wrap)

mrleblanc101 opened this issue · 3 comments

Describe the bug

It is currently not possible to have multiline labels

Additional context (If there is no relevant content, please delete the block)

I have some long label that i would like to wrap to a second line.
I tried adding a <br /> but the library seem to use .innerText instead of .innerHTML to set the label

Add any other context or screenshots about the feature request here.
Capture d’écran, le 2021-07-16 à 15 46 46

You can use \n + labelStyle to implement.

example:
https://jsfiddle.net/o0cxnjbh/1/

Does not work if I use the slot:

    <vue-slider
        class="v-slider"
        :data="data"
        :width="width"
        :height="6"
        tooltip="none"
        adsorb
        :value="value"
        :label-style="{ whiteSpace: 'pre-line', textAlign: 'center' }"
        @change="$emit('input', $event)"
    >
        <template #label="slot">
            <div :class="['vue-slider-mark-label', { 'vue-slider-mark-label-current': slot.value === value }]">
                {{ slot.label }}
            </div>
        </template>
    </vue-slider>
    ```

I ended up using nl2br which I already had installer as a global filter.
v-html="$options.filters.nl2br(slot.label)"