Search code examples
javascriptjqueryhtmlcssround-slider

Round Slider with multicolor background fixed

I'm trying to create a round slider with the librery roundSlider.js, which has a background in the path that is multicolour. I have tried using a linear-gradient but the result is not good, because when I start moving the slider with the hadler, the background colors start to move and some disappear.

This is the code that I have:

  $(document).ready(function () {

    $("#shape").roundSlider({
    radius: 80,
    width: 8,
    min: 0,
    max: 100,
    handleSize: "+16",
    circleShape: "pie",
    handleShape: "dot",
    sliderType: "min-range",
    startAngle: 315,
    value: 24,
    disabled: false
});
        });
 .rs-range-color {
  background: linear-gradient(to right, yellow 20%, blue 20%, blue 40%, red 40%, red 60%, green 60%, green 80%, brown 80%, brown 100%);
 }

 .rs-path-color {
   /*background-color: #C2E9F7;*/
  background: linear-gradient(to right, yellow 20%, blue 20%, blue 40%, red 40%, red 60%, green 60%, green 80%, brown 80%, brown 100%);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
 }

 .rs-handle {
   background-color: #C2E9F7;
   padding: 7px;
   border: 2px solid #C2E9F7;
 }

 .rs-handle.rs-focus {
   border-color: #33B5E5;
 }

 .rs-handle:after {
   border-color: #33B5E5;
   background-color: #33B5E5;
 }

 .rs-border {
   border-color: transparent;
 }

 .rs-tooltip-text {
   font-family: Roboto, sans-serif;
   font-size: 20px;
   border-radius: 7px;
   transition: background 0.02s ease-in-out;
   color: #33B5E5;
 }

 .rs-tooltip-text:before {
   position: absolute;
   left: -10px;
   top: -18px;
   content: 'DISCOUNT';
   font-size: 12px;
 }

 .rs-tooltip-text:after {
   position: absolute;
   left: 10px;
   top: 48px;
   content: '';
   font-size: 12px;
 }


.container{
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Roboto, sans-serif;
  padding: 20px;
  border: 1px solid;
}

/* Solution for inner circle with shadow */
#shape:after {
  content: " ";
  display: block;
  height: calc(100% - 40px); /* here 40 is the gap between the outer and inner circle */
  width: calc(100% - 40px);
  position: absolute;
  top: 20px;  /* divide the gap value by 2 */
  left: 20px;
  z-index: 9; /* tooltip z-index is 10, so we put less than that value */
  border-radius: 1000px;
  box-shadow: 0 0 10px -2px;
}

/* Solution for bottom triangle out issue */
#shape .rs-overlay {
    height: calc(50% + 5px);
    width: calc(50% + 5px);
    top: -5px;
    left: -5px;
    border-radius: 1000px 0 0 0;
}
<!DOCTYPE html>
<html>
<head>
    <title>RoundSlider - A sample testing</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/roundslider.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/roundslider.min.js"></script>
</head>
<body style="padding: 10px 0 0 20px; font-family: monospace;">

        <div class="container">
            <div class="control">
                <div id="shape"></div>
            </div>
        </div>
    
</body>
<html>

When you run the code above, you can see the background color of the path moves as I move the handler, that's the problem. I would like the background to stay fixed. In other words, I would like the background path as a gradient with 3 or more colors and that this background covered 100% of the slider. I don't want the colors moving or be removed to make way for others.

Solution

  • In roundSlider the svgMode was available where the slider was constructed by SVG elements. So using that you can apply the SVG gradient to the range and path element. Also here these elements are single element, so you won't get this problem.

    Here I have updated the demo based on your scenario, check below:

    https://jsfiddle.net/soundar24/6se2tmp9/

    In this demo I didn't set the pathColor because if both rangeColor and path color are same then you won't find any difference.

    Also, since this is the default SVG gradient only, so based on your requirement you can modify this SVG linear gradient.

    EDIT 1:

    Based on your comments, then you need to use the conic gradient. In SVG there is no explicit option for conic gradient, but still you can find the ways to achieve that.

    1. Alternatively I have used the CSS conic gradient to achieve that. Check the below demo:

      https://jsfiddle.net/soundar24/6se2tmp9/2/

    2. Also I have done a workaround to create SVG range segments on the roundSlider path. This is also similar to your requirement. Check the below demo:

      https://jsfiddle.net/soundar24/8pgo9ce7/