Slider with Gradient only from Red to Green color

[shoaiblucideus]

Hi Soundar,

I want to achieve a effect in which path will be gradient from red to green color... Something like colorPicker example but all with all colors. Color Range only be Red to Green ( i.e Red, Orange, Yellow, Green).

Any Help

[soundar24]

Here I made a color picker based on your requirement, check the below demo and update me your comments:

https://jsfiddle.net/soundar24/qekqkp3n/1/

If you need any alternate design or functionality then let me know some brief details, also you can share any rough screenshot for your requirement.

[SterlingButters]

@soundar24 Is there a simpler solution? Something like:

$("#slider").roundSlider({
    sliderType: "range",
    ...
    
    svgMode: true,
    pathColor: "linear-gradient(to right, blue 0%, red 100%)",
    rangeColor: "linear-gradient(to right, blue 0%, red 100%)",    
});

or

#slider .rs-range-color { background: linear-gradient(to right, blue 0%, red 100%); }

and/or

#slider .rs-path-color { background: linear-gradient(to right, blue 0%, red 100%); }

I tried your example but couldn't necessary adapt it

Awesome project btw

[soundar24]

@SterlingButters recently I have updated a similar answer in StackOverflow, based on that you can simply use the Conic CSS gradient for this. Check the below demos:
https://jsfiddle.net/soundar24/6se2tmp9/3/
https://jsfiddle.net/soundar24/6se2tmp9/4/

Suppose if you want to use the range slider, then just go with the below way:
https://jsfiddle.net/soundar24/6se2tmp9/5/

Still if you need any more customization then let me know some more details with the actual use-case which is better to understand and provide my suggestions.. thanks

[SterlingButters]

@soundar24 perfect, thank you!