Vary the color of a range

Question

Vary the color of a range

Navigation

#1 by (2 votes)

2

Hello, I have the following range

var $sliders = $("input.slider");
$.each($sliders, function(i, elemento){
    tooltip: 'always';
    console.log(elemento.id);
    var slider = new Slider('#'+elemento.id, {
        formatter: function(value) {
            if(value >0 && value <=50) {
                return '' + value;
            }if(value>=51 && value <=80){
                return '' + value;
            }if(value>=81 && value <=100) {
                return '' + value;
            }
        }
    });
});

.slider-selection {
    position: absolute;
    background-image: linear-gradient(to right, red, yellow, green);
    background-repeat: repeat-x;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    border-radius: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label>0%</label>
<input id="slider" class="slider" type="text"  data-slider-min="1" data-slider-max="100" data-slider-step="1" data-slider-value="50"/>
<label>100%</label>

Use linear-gradient(to right, red, yellow, green); what I want is that when you reach for example 45% is ALL the slider is yellow and degrades to red as you go down or change to green as you go up the percentage in the whole slider.

javascript html5 css

asked by Luis Miguel 23.08.2018 в 18:42

source

1 answer

I have some images saved in an array of objects and I want them to be the same size at the time of presenting them How to make irregular figures

score 2 · Accepted Answer

Try something like this (I answered before you modified your question)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<style>
  input[type=range] {
    margin: auto;
    outline: none;
    padding: 0;
    width: 640px;
    height: 10px;
    background-color: #dedede;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff1100), color-stop(100%, #ff1100));
    background-size: 50% 100%;
    background-repeat: no-repeat;
    border-radius: 10px;
    cursor: pointer;
    -webkit-appearance: none;
  }

  input[type=range]::-webkit-slider-runnable-track {
    box-shadow: none;
    border: none;
    background: transparent;
    -webkit-appearance: none;
  }


  input[type=range]::-webkit-slider-thumb {
    height: 18px;
    width: 18px;
    border: 0;
    background: #fff;
    border: 1px solid #777;
    border-radius: 20px;
    box-shadow: 0 0 1px 0px rgba(0, 0, 0, 0.1);
    -webkit-appearance: none;
  }
</style>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <input type="range" min="1" max="100" value="1" />
</body>

<script>
  $('input[type=range]').on('input', function (e) {
    var min = e.target.min,
      max = e.target.max,
      val = e.target.value;
    if (val < 34) {
      $(e.target).css({
        'background-image': '-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, red), color-stop(100%, red))'
      });
    }
    if (val > 34 && val < 64) {      
      $(e.target).css({
        'background-image': 'linear-gradient(to right, red , yellow)'
      });
    } 
    if (val > 64) {      
      $(e.target).css({
        'background-image': 'linear-gradient(to right, red , yellow,green)'
      });
    }


    $(e.target).css({
      'backgroundSize': (val - min) * 100 / (max - min) + '% 100%'
    });
  }).trigger('input');
</script>

</html>

You can see it working here:

  $('input[type=range]').on('input', function (e) {
    var min = e.target.min,
      max = e.target.max,
      val = e.target.value;
    if (val < 34) {
      $(e.target).css({
        'background-image': '-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, red), color-stop(100%, red))'
      });
    }
    if (val > 34 && val < 64) {      
      $(e.target).css({
        'background-image': 'linear-gradient(to right, red , yellow)'
      });
    } 
    if (val > 64) {      
      $(e.target).css({
        'background-image': 'linear-gradient(to right, red , yellow,green)'
      });
    }


    $(e.target).css({
      'backgroundSize': (val - min) * 100 / (max - min) + '% 100%'
    });
  }).trigger('input');

input[type=range] {
    margin: auto;
    outline: none;
    padding: 0;
    width: 640px;
    height: 10px;
    background-color: #dedede;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff1100), color-stop(100%, #ff1100));
    background-size: 50% 100%;
    background-repeat: no-repeat;
    border-radius: 10px;
    cursor: pointer;
    -webkit-appearance: none;
  }

  input[type=range]::-webkit-slider-runnable-track {
    box-shadow: none;
    border: none;
    background: transparent;
    -webkit-appearance: none;
  }


  input[type=range]::-webkit-slider-thumb {
    height: 18px;
    width: 18px;
    border: 0;
    background: #fff;
    border: 1px solid #777;
    border-radius: 20px;
    box-shadow: 0 0 1px 0px rgba(0, 0, 0, 0.1);
    -webkit-appearance: none;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="range" min="1" max="100" value="1" />