Modify jQuery ui slider. Min/max(positive/negative) both range from middle

Question

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

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.

You could make two range sliders next to each other, one with a fixed min and the other with a fixed max — blgt
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

Shijin TR Shijin TR · Accepted Answer · 2016-01-20T11:36:03

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>

Modify jQuery ui slider. Min/max(positive/negative) both range from middle

1 Answers