Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

[feature] Styles to accept linear gradients.#149

Discussion options

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
}

You must be logged in to vote

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;

<RangeSliderid="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!

Replies: 1 comment

Comment options

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;

<RangeSliderid="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!

You must be logged in to vote
0 replies
Answer selected bysimeydotme
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Labels
feature requestinvestigatingNot quite sure if it's valid, yet
2 participants
@learyjk@simeydotme
Converted from issue

This discussion was converted from issue #148 on September 24, 2024 03:07.


[8]ページ先頭

©2009-2025 Movatter.jp