Custom labels

[luisfferreiraDev]

Can't seem to find a way to have custom labels on my slider, is it possible to pass an array of strings and use them as the labels?

Right now i'm using JavaScript to replace the current label values with my desired values but a way to build it with the slider would be better

[luisfferreiraDev]

I managed to do it like this:

RangeSlider.svelte

RangePips.svelte

`

{#if (all && first !== false) || first } {labelDown(e)}} on:pointerup={(e)=>{labelUp(pipVal(min),e)}} > {#if all === 'label' || first === 'label'} {#if prefix}{prefix}{/if} {#if customPips}{customPips[0]}{:else}{formatter(fixFloat(min), 0, 0)}{/if} {#if suffix}{suffix}{/if} {/if} {/if}

{#if (all && rest !== false) || rest}
    {#each pips as pip, i}
        {#if pipVal(i) !== min && pipVal(i) !== max}
<span
        class="pip"
        class:selected={isSelected(pipVal(i))}
        style="{orientationStart}: {percentOf(pipVal(i))}%;"
        on:pointerdown={(e)=>{labelDown(e)}}
        on:pointerup={(e)=>{labelUp(pipVal(i),e)}}
>
    {#if all === 'label' || rest === 'label'}
    <span class="pipVal">
        {#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}
        {#if customPips}{customPips[i]}{:else}{formatter(pipVal(i), i, percentOf(pipVal(i)))}{/if}
        {#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
    </span>
    {/if}
</span>
        {/if}
    {/each}
{/if}

{#if (all && last !== false) || last}
<span
        class="pip last"
        class:selected={isSelected(max)}
        style="{orientationStart}: 100%;"
        on:pointerdown={(e)=>{labelDown(e)}}
        on:pointerup={(e)=>{labelUp(pipVal(max),e)}}
>
    {#if all === 'label' || last === 'label'}
    <span class="pipVal">
        {#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}
        {#if customPips}{customPips[pipCount]}{:else}{formatter(fixFloat(max), pipCount, 100)}{/if}
        {#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
    </span>
    {/if}
</span>
{/if}

`

If no customPips is passed it will use the default logic else it uses the customPips.

You can pass the custom labels like this:

<RangeSlider range min={0} max={12} pips hoverable={false} step={1} first="{false}" last="{false}" all="label" customPips="{[0, 10, 15, 20, 25, 30, 35, 40, 50, 60, 75, 100, 0]}"/>

[simeydotme]

I guess you didn't read the docs?
https://simeydotme.github.io/svelte-range-slider-pips/en/examples/formatter/
the formatter prop handles this already .. I'd advise against editing the source for this :)

also see this discussion #72