CODEWITHSUNDEEP
htmlcolorsslidertransition
Alexander Wagner
Alexander Wagner

Reputation: 41

Soft color change of Roundslider

I would like to have a soft/smooth color change at some value points of my RoundSlider. At the moment I have some hard color changes at the values 16, 20, 25 but that looks not very nice.

I tried to solve this with TweenLite, but I sadly did it not make to work... Do you have any other suggestions for me how I can solve this?

It would be okay with me to have a color transition from blue to red of the values 0 - 30, because the slider should be a input element for a thermostat.

Thank you!

$("#SetRoomTmpSlider").roundSlider({
        sliderType: "min-range",
        circleShape: "half-top",
        startAngle: "315",
        lineCap: "round",
        radius: 130,
        width: 20,
    
        min: 5,
        max: 30,
        
        svgMode: true,
        pathColor: "#eee",
        borderWidth: 0,
        
        startValue: 0,
        
        valueChange: function (e) {


          var color = "#0B77DD";
          var logo = document.getElementById("SetRoomTmpSlider");

          if(e.value >= 25)
          {

            color = "#ec2906";
            
          }
          else if (e.value >= 20)
          {
            color = "#EC7906";
          }
          else if (e.value >= 16)
          {
            color = "#ECB406";
          }



          $("#SetRoomTmpSlider").roundSlider({ "rangeColor": color, "tooltipColor": color });
        }
    });
    
    var sliderObj = $("#SetRoomTmpSlider").data("roundSlider");
    sliderObj.setValue(30);
#SetRoomTmpSlider .rs-handle {
  background-color: #f3f3f3;
  box-shadow: 0px 0px 4px 0px #000;
}
#SetRoomTmpSlider .rs-tooltip-text {
  font-size: 25px;
  font-weight: bold;
}

#SetRoomTmpSlider{

  position: absolute;
  top: 60%;
  left: 50%;
  margin: -100px 0 0 -150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head>

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/roundslider.min.js">         </script>
  </head>
  <body>
       <div id="SetRoomTmpSlider"></div>
   </body>
</html>

Upvotes: 1

Views: 203

Answers (1)

EssXTee
EssXTee

Reputation: 1798

Simplest Answer

You can try adding something like the following to your CSS to add a smooth transition between the colors:

#SetRoomTmpSlider path {
  transition: stroke .2s linear;
}

Alternate Solution

The above simply allows there to be a smoother transition between existing colors. However, as per your original question I also decided to make a full transition between the cold and hot values.

Only the cold and hot colors are given. The rest is calculated based on where the slider is between to two. You will miss out on things like shades of yellow/orange (because a shift from blue to red simply passes through purple). But I think it's a decent effect and serves as an alternative way to achieve your goal.

$("#SetRoomTmpSlider").roundSlider({
  sliderType: "min-range",
  circleShape: "half-top",
  startAngle: "315",
  lineCap: "round",
  radius: 130,
  width: 20,
  min: 5,
  max: 30,
  svgMode: true,
  pathColor: "#eee",
  borderWidth: 0,
  startValue: 0,

  valueChange: function(e) {
    var color = "#0B77DD";
    var logo = document.getElementById("SetRoomTmpSlider");
    let colorRange = [
      "0B77DD",
      "EC2906"
      ],
        colorCount = 25,
        colorIntervals = [
          Math.round((parseInt(colorRange[1].substr(0,2), 16) - parseInt(colorRange[0].substr(0,2), 16)) / colorCount),
          Math.round((parseInt(colorRange[1].substr(2,2), 16) - parseInt(colorRange[0].substr(2,2), 16)) / colorCount),
          Math.round((parseInt(colorRange[1].substr(-2), 16) - parseInt(colorRange[0].substr(-2), 16)) / colorCount)
          ],
        rC = (Math.abs(parseInt(colorRange[0].substr(0,2), 16) + ((e.value - 5) * colorIntervals[0])) < 10) ? "0"+Math.abs(parseInt(colorRange[0].substr(0,2), 16) + ((e.value - 5) * colorIntervals[0])).toString(16) : (parseInt(colorRange[0].substr(0,2), 16) + ((e.value - 5) * colorIntervals[0])).toString(16),
        gC = (Math.abs(parseInt(colorRange[0].substr(2,2), 16) + ((e.value - 5) * colorIntervals[1])) < 10) ? "0"+Math.abs(parseInt(colorRange[0].substr(2,2), 16) + ((e.value - 5) * colorIntervals[1])).toString(16) : (parseInt(colorRange[0].substr(2,2), 16) + ((e.value - 5) * colorIntervals[1])).toString(16),
        bC = (Math.abs(parseInt(colorRange[0].substr(-2), 16) + ((e.value - 5) * colorIntervals[2])) < 10) ? "0"+Math.abs(parseInt(colorRange[0].substr(-2), 16) + ((e.value - 5) * colorIntervals[2])).toString(16) : (parseInt(colorRange[0].substr(-2), 16) + ((e.value - 5) * colorIntervals[2])).toString(16);

    color = "#" + rC + gC + bC;
          
    $("#SetRoomTmpSlider").roundSlider({ "rangeColor": color, "tooltipColor": color });
  }
});

var sliderObj = $("#SetRoomTmpSlider").data("roundSlider");
sliderObj.setValue(30);
#SetRoomTmpSlider .rs-handle {
  background-color: #f3f3f3;
  box-shadow: 0px 0px 4px 0px #000;
}
#SetRoomTmpSlider .rs-tooltip-text {
  font-size: 25px;
  font-weight: bold;
}

#SetRoomTmpSlider {
  position: absolute;
  top: 60%;
  left: 50%;
  margin: -100px 0 0 -150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/roundslider.min.js"></script>
<div id="SetRoomTmpSlider"></div>

Upvotes: 1

Related Questions