[Feature] Show the steps of a slider

[avi12]

Similarly to:

The Slider component needs to support showing the steps. This is how it's done in Vuetify.

[TheComputerM]

I did not add this as I could not think of a way to also add logarithmic steps, vuetify does not use noUiSlider internally but svelte-materialify does so this can be done easily.

[TheComputerM]

You can also do some flexbox magic till this is implemented, (threw this up quickly so not as good):

<script>
	import { MaterialApp, Slider } from 'svelte-materialify';
	let value;
	const a = ['0.25', '0.5', '0.75', 'Normal', '1.25', '1.5', '1.75', '2'];
</script>

<MaterialApp>
	<div class="d-flex">
		<div class="pr-3">
			<Slider vertical min={0} max={8} step={1} bind:value />
		</div>
		<div class="d-flex flex-column">
			{#each a as i}
				<span class="text-body-2">{i}</span>
			{/each}
		</div>
	</div>
</MaterialApp>

[avi12]

While it seems to work visually, I do want the user to be able to click on a label and it will move the thumb to the corresponding point, as this is the current functionality

[TheComputerM]

This is hard as noUiSlider does not do this, seems we may have to implement our own slider or labels.

[avi12]

I see, then in the meantime, I will revert to using Vuetify until such functionality will be implemented