自定义 Svelte 材质 UI 滑块标签

Question

I need to set custom label of smui/slider https://sveltematerialui.com/demo/slider/ in a tick marks and discrete slider. I've found explained hot to do it in material web components https://github.com/material-components/material-components-web/tree/v13.0.0/packages/mdc-slider and it seems that is possible using setValueToAriaValueTextFn but there isn't any example, and even less using svelte.

How can I do it?

Thank's in advance

Answer 1

It is unfortunately not possible to change the tooltip text with https://sveltematerialui.com/demo/slider/ .

The tooltip text is bound to value . See here: https://github.com/hperrin/svelte-material-ui/blob/master/packages/slider/src/Slider.svelte#L181

<span class="mdc-slider__value-indicator-text">{value}</span>

The value is exported by the component and you could modify it, but this would of course only allow for numbers and would also change the current value/position of the slider -> which would mess up it's functionality.