[feature] Styles to accept linear gradients.

[learyjk]

Describe the feature
I would love to have a gradient for the slider track.

Explain it's value / reasoning
I see them pretty often and then I could use this Range Slider for a color picker I'm building.

Additional context
This doesn't work to style the range slider background

:root {
--range-slider: linear-gradient(
to right,
hsl(0, 100%, 50%),
hsl(60, 100%, 50%),
hsl(120, 100%, 50%),
hsl(180, 100%, 50%),
hsl(240, 100%, 50%),
hsl(300, 100%, 50%),
hsl(360, 100%, 50%)
);
}

But this does:

:root {
--range-slider: green
}

[simeydotme]

hi @learyjk
I'm not sure how I feel about putting a whole gradient into a variable, feels a little off.

But good news is that you can still add gradients to sliders;

<RangeSlider id="mySlider" range />

#mySlider .rangeBar {
  background: linear-gradient(90deg, var(--color1), var(--color2));
}

There's a somewhat extra example in the docs; https://simeydotme.github.io/svelte-range-slider-pips/en/recipes/price-range/ ...

but I think it's a good idea for me to put 'gradients' as a topic under the styling section of the docs to help anyone like yourself :)

Cheers!