3

I'm using this UI Slider. I've to make this slider with 3 different colors for:

  1. Handle Color
  2. Previous portion of Handle
  3. Next portion of Handle

Something like this:

So far, I'm able to put handle color only:

But, How can I set two more different color (one is for previous portion of Handle and another is for next portion of handle like the first screenshot)? Is there any way adding two different classes by jQuery and style those classes like: 

.handle-previous-slider {
  background: yellow;
}
.handle-next-slider {
  background: green;
}

? So far, my result at fiddle

user1896653
  • 3,247
  • 14
  • 49
  • 93
  • There's only one item in the background for the non-enclosed part of the range, so you will need to modify the control to create left -unselected and right-unselected slider sections to style. – jball Dec 30 '14 at 17:17

3 Answers3

4

If you're looking for a JS solution, this is how I approached the problem, using the "slide" event.

slide: function (event, ui) {
    var totalWidth = $(".slider").width();
    $(".left-color").width((ui.values[0]) / 100 * totalWidth);
},
Jack Guy
  • 8,346
  • 8
  • 55
  • 86
3

A CSS only solution would look like this:

http://jsfiddle.net/qgoq6xm6/

.ui-slider .ui-slider-range:before,
.ui-slider .ui-slider-range:after {
    display:block;
    height:14px;
    content:'';
    background:yellow;
    right:100%;
    top:0px;
    left: -1000px;
    position:absolute;
}

.ui-slider .ui-slider-range:after {
    background:green;
    left:100%;
    right:-1000px;
}

.slider-container {
    overflow:hidden;
    padding:5px
}

So basically this will add a 1000px width element before and after the blue range div using absolute position. 1000px should be the width of your slider, currently you're using a 100% width slider in the demo, so i just used 1000px as an example.

You also need to wrap the slider in a new div with overflow:hidden, so it will cut off the green and yellow lines on the left and right side.

passatgt
  • 4,234
  • 4
  • 40
  • 54
  • 1
    This leads to some overlay issues at the left and right sides of the slider currently. – jball Dec 30 '14 at 17:19
  • In the screenshot above theres no border around the slider itself, so if you remove that it will look just fine. But it can be fixed with CSS. see: http://jsfiddle.net/qgoq6xm6/1/ – passatgt Dec 30 '14 at 17:20
  • Thanks, you removed border from the two edge, it's fine. But, I need border-radius at those two corner – user1896653 Dec 30 '14 at 17:27
  • You won't be able to use a border-radius with this solution. Those 1000px are going far beyond the left and right edges of the container, so when you add a border-radius you won't see it. Adding overflow:hidden would fix the edges but hide your text and part of your handles. – Jack Guy Dec 30 '14 at 17:42
  • Thank you, the easiest solution :) – Hasan Zahran Jul 05 '16 at 20:29
0

You can achieve this effect by using jQueryUI's 4custom theming to applying a 3-color striped linear-gradient() to the background of .ui-slider, and setting the background of .ui-slider-range to transparent.

Then you just need some code (or maybe some fancy css?) to update the gradient's multiple stop-points to match the slider's selected values.

The control is basically 3 layers:

  • on top are the handles. (They can also be customized.)
  • in the middle is the background between the 2 handles. (.ui-slider-range)
  • on the bottom is the back-background. (.ui-slider)

explanation of layers

The result of the demo snippet (below) is something like this: example

const dvRed=29.9, dvGreen=58.7; //defaults
var dvs=[dvRed, dvRed+dvGreen];

$(document).ready( function(){ //setup slider
  $('#slider').slider({
    min: 0,
    max: 100,
    step: 0.1,
    values: dvs,
    range: true,
    slide: function(event, ui) {
      $.each(ui.values, function(i, v) {
        updateSlider(); //update vals on change
      });
    }
  });
  updateSlider(); //initial update of vals
});

function updateSlider(){
  //get slider values
  var R=Math.round($('#slider').slider('values')[0]*10)/10,
    B=Math.round((100-$('#slider').slider('values')[1])*10)/10,
    G=Math.round(((100-(R+B)))*10)/10;

  //set slider track to 3 colors
  $('.ui-slider').css('background','linear-gradient(90deg, red 0% '+R+'%, green '+R+'% '+(G+R)+'%, blue '+(G+R)+'% 100%');

  //center labels between handles
  $('#val1').html(R+'%').css('left',R/2+'%');
  $('#val2').html(G+'%').css('left',R+(G/2)+'%');
  $('#val3').html(B+'%').css('left',R+G+(B/2)+'%');

  //set body background color
  var bg='rgb('+R*2.55+','+G*2.55+','+B*2.55+')';
  $(document.body).css('background', bg);
}
    body{ font-family: Roboto, Helvetica, Arial, sans-serif; }
    #slider_cont{ position:relative; width:60vw; margin:5vh 20vw 10vh; }
    #slider{ width:100%; }
    #slider_vals{ width:100%; }
    #val1{ position:absolute; left:33%; color:red; }
    #val2{ position:absolute; left:50%; color:green; }
    #val3{ position:absolute; left:66%; color:blue; }
    .ui-slider-range { background:transparent !important;}
    .ui-slider{background-image:linear-gradient(90deg, red 0 40%, green 40% 60%, blue 60% 100%);}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id='slider_cont'>
  <div id='slider'></div>
  <div id='slider_vals'>
    <div id='val1'></div>
    <div id='val2'></div>
    <div id='val3'></div>
  </div>
</div>

<div id='colors'></div>
ashleedawg
  • 20,365
  • 9
  • 72
  • 105