3

I use a jQuery plugin UI Slider - https://jqueryui.com/slider/ And I need some help with modifying it into this view

range blue line should appear when handle moves from center to max/min values

Handle should be single and range blue line should appear when handle moves from center to max or to min values I can't find any solution for this. :( Can anyone help me with this?

UPD: I need only one slider with one handle which will have start in middle and should slide to right or left.

Aleksandr_A
  • 350
  • 6
  • 13
  • You could make two range sliders next to each other, one with a fixed min and the other with a fixed max – blgt Jan 20 '16 at 11:08
  • Thnx for reply, but I must be not well specified my problem. I need only one slider with one handle which will have start in middle and should slide to right or left – Aleksandr_A Jan 20 '16 at 11:18

1 Answers1

6

Check the bellow example,

$(".slider").slider({
    value: 0,
    min: -5,
    max: 5,
    create : function() {
     var value=$(".slider").slider( "value" );
      $("#amount").val((value > '0') ? ('+'+ value) : value);
    },
    slide: function (event, ui) {
     var value = Math.abs(ui.value);
     var percentage = (value/5)*100;
        if(ui.value>0){
         $('#blue_bar .min span').css('width',percentage+'%');
         $('#blue_bar .max span').css('width','0%');
        }

        if(ui.value<0){
         $('#blue_bar .max span').css('width',percentage+'%');
         $('#blue_bar .min span').css('width','0%');
        }  
        if(ui.value==0){
   $('#blue_bar .max span').css('width','0%');
   $('#blue_bar .min span').css('width','0%');
        } 

            
    }
}).append('<div id="blue_bar" style="width: 100%"><div class="min"><span></span></div><div class="max"><span></span></div></div>');;
#blue_bar {
    float: right;
    height: 100%;
    border-radius: 0 4px 4px 0;
 
} 
#blue_bar div{
 width: 50%;
 height: 100%;
 float:right;
}
#blue_bar .min span{
 background-color: blue;
 width: 0%;
 height: 100%;
 float:left;
}
#blue_bar .max span{
 background-color: blue;
 width: 0%;
 height: 100%;
 float:right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="slider"></div>
Shijin TR
  • 7,516
  • 10
  • 55
  • 122
  • 1
    thnx, but I can't see a range line(class="ui-slider-range") which appear from middle to handle position if it moved. I really need range line – Aleksandr_A Jan 20 '16 at 11:57
  • I saw you are use console.log() in your answer script. Maybe this line just for testing and it should be deleted from your answer? Many users can missed it and add to their code. – Aleksandr_A Jan 20 '16 at 12:35