jquerycssbootstrap-slider

Multicolor Selected Region - Bootstrap Slider by Seiyria


Is it possible to make a multicolor "selected region" for the seiyria-bootstrap-slider?

Maybe someone is able to help me. I will attach below my project example, so u can try and test.

Multicolor example

 var minSliderValue = $("#ex11").data("slider-min");
            var maxSliderValue = $("#ex11").data("slider-max");

            $('#ex11').slider({
                ticks: [1, 2, 3, 5, 10, 25, 50, 100],
                ticks_positions: [0, 10, 20, 35, 50, 65, 82.5, 100],
                ticks_labels: ["1x", "2x", "3x", "5x", "10x", "25x", "50x", "100x"],
                ticks_snap_bounds: 1, //0.5
                ticks_tooltip: true,
                step: 1,
                max: 100, //JS script
                tooltip: 'always',
                value: 10,
                //focus: true,
                formatter: function (value) {
                    return value + 'x';
                },
            });

            $("#input-value").on("keyup", function () {
                var val = Math.abs(parseInt(this.value, 10) || minSliderValue);
                this.value = val > maxSliderValue ? maxSliderValue : val;
                $('#ex11').slider('setValue', val);
            });

            $("#ex11").slider();
            $("#ex11").on("slide", function (slideEvt) {
                $("#ex11SliderVal").text(slideEvt.value);
            });
            #ex11Slider .slider-selection {
                background: #FF8282;
            }

            #ex11Slider .slider-handle {
                background: red;
            }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/css/bootstrap-slider.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.js"></script>

    <div style="text-align:center">
        <br>
        <div>
            <hr />
            <input id="ex11" data-slider-id='ex11Slider' type="text" data-slider-min="0" data-slider-max="100"
                data-slider-step="1" />&nbsp;&nbsp;&nbsp;&nbsp;
            <span id="ex11CurrentSliderValLabel">Value: <span id="ex11SliderVal">10</span></span>
            <hr />
        </div>


Solution

  • You can use linear-gradient

    https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient()

    var minSliderValue = $("#ex11").data("slider-min");
    var maxSliderValue = $("#ex11").data("slider-max");
    
    $('#ex11').slider({
      ticks: [1, 2, 3, 5, 10, 25, 50, 100],
      ticks_positions: [0, 10, 20, 35, 50, 65, 82.5, 100],
      ticks_labels: ["1x", "2x", "3x", "5x", "10x", "25x", "50x", "100x"],
      ticks_snap_bounds: 1, //0.5
      ticks_tooltip: true,
      step: 1,
      max: 100, //JS script
      tooltip: 'always',
      value: 10,
      //focus: true,
      formatter: function(value) {
        return value + 'x';
      },
    });
    
    $("#input-value").on("keyup", function() {
      var val = Math.abs(parseInt(this.value, 10) || minSliderValue);
      this.value = val > maxSliderValue ? maxSliderValue : val;
      $('#ex11').slider('setValue', val);
    });
    
    $("#ex11").slider();
    $("#ex11").on("slide", function(slideEvt) {
      $("#ex11SliderVal").text(slideEvt.value);
    });
    body {
      background-color: #0f121b!important;
      color: #fff!important;
      padding: 4rem 2rem;
    }
    
    #ex11Slider {
      margin: 2rem;
      width: 70%;
    }
    
    .slider-tick,
    .slider-handle {
      background-color: #ffffff!important;
      background-image: none!important;
      opacity: 1!important;
    }
    
    .slider-track {
      background-image: -webkit-gradient(linear, left top, right top, from(#129b6b), color-stop(#e5d02b), to(#b44b53))!important;
      background-image: -o-linear-gradient(left, #129b6b, #e5d02b, #b44b53)!important;
      background-image: linear-gradient(to right, #129b6b, #e5d02b, #b44b53)!important;
    }
    
    .slider-selection.tick-slider-selection {
      background-color: transparent!important;
      background-image: none!important;
    }
    
    .slider-track-high {
      background-color: #2d343e!important;
      background-image: none!important;
    }
    
    .slider-tick-label.label-is-selection {
      color: #4368bf!important;
      font-weight: 500!important;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/css/bootstrap-slider.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.js"></script>
    
    <div>
      <input id="ex11" data-slider-id='ex11Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" />&nbsp;&nbsp;&nbsp;&nbsp;
      <span id="ex11CurrentSliderValLabel">Value: <span id="ex11SliderVal">10</span></span>
    </div>