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.

Answer 1

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>