Slider per-mark customisation

[coldino]

Describe the feature in detail (code, mocks, or screenshots encouraged)

I have a slider where I want to name each of the marks differently. Sadly the mark snippet takes no value so can only replace all of them with the same text/icon.

Could this be extended to provide the mark position/value to the snippet? In theory this should not affect backwards compatibility and could be a pretty small change.

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

No response

[endigo9740]

@coldino unfortunately after researching this I think it's going to be a heavier lift than expected. The reason being is that we now implement our components on top of Zag. Which means we follow their guidelines for implementing features. Here's how markers are handled for example:

https://zagjs.com/components/svelte/slider#using-slider-marks

They essentially expect you to iterate through each marker value - which is the numeric percentage amounts you wish to indicate. Like 25%, 50%, 75% would be [25, 50, 75]. As you can see in their example, they show a hardcoded pipe | character to illustrate each mark.

We however, go a step further and provide the option of rendering either a custom mark (such as an icon) via a snippet (in Svelte) or by default show the numeric value. The issue here is each span instance must have the api.getMarkerProps attributes spread to them, which means this must occur within the component access to have access to the API scope. This is a bit tougher to do with Svelte as snippets have a pre-defined name. Which means no dynamic snippets or "loop of snippets".

The only way we could make this work would be to introduce another optional sub-component that would allow you to define markers in a template-driven fashion. This would look like this:

<Slider bind:value>
     <Slider.Mark value={25}>(icon)</Slider.Mark>
     <Slider.Mark value={50}>(icon)</Slider.Mark>
     <Slider.Mark value={75}>(icon)</Slider.Mark>
</Slider>

This is not a trivial change, so I was hoping you might provide more insight on the use case here. If there's a solid use case then I think we can justify the change. Otherwise I think this may be a larger effort than what we get in return. Especially if most users opt for either a uniform icon or numeric value as I expect they will.

Just FYI this would be considered a breaking change, so we need to make the final call before the full release coming in January.

[coldino]

Okay well first things first - my usecase: I use the slider to display a controllable timeline, which needs marks on it to identify key points. The value of the slider would be a timestamp so displaying the value directly as the mark is pretty nasty, yet converting it to something more pleasant is easy if the snippet had access to the value - either a time, a mark index, or an individual icon.

In my case it is used as behind the scenes "debug" UI so not worth rolling my own fully featured control.

[coldino]

Had a quick look at the code. Could you simply pass value to the mark snippet?

{#each markers as value}
	<!-- Mark -->
	<span {...api.getMarkerProps({ value })} class="{markBase} {markText} {markOpacity} {markClasses}" data-testid="slider-mark">
		{#if mark}
			{@render mark()}  <!-- use mark(value) or mark({value}) here? -->
		{:else}
			{value}
		{/if}
	</span>
{/each}

[endigo9740]

@coldino understood - thanks for detailing the use case.

Now that you mentioned it I do seem to recall that being a feature of Svelte snippets. I just realized I missed a critical detail above - which is that we aim to maintain parity for all supported frameworks. Right now that means Svelte + React, but in the future Vue, Solid, etc.

If the snippet param works that's great for Svelte users, but I'm not if that can directly translate to the React component. However, the suggestion of sub-components would be a near identical pattern for all frameworks.

Let me sleep on this and then revisit asap. You might be onto something here though.

[coldino]

Slots can have parameters in Vue. Perhaps the same is true for React.