javascript - jQuery UI Slider - Change background color ONLY between handlers/sliders/markers -

i using jquery ui slider. have multiple hanldes range set false. there way color range between 2 handles/sliders/markers whatever want call them? have not found solution yet.

this code/initialization using.

    var initialvalues = [180, 435, 1080, 1320],     updatevalue = function (ui) {     var hours = math.floor(ui.value / 60);     var minutes = ui.value - (hours * 60);      if (hours.length == 1) hours = '0' + hours;     if (minutes.length == 1) minutes = '0' + minutes;     if (minutes == 0) minutes = '00';     if (hours >= 12) {         if (hours == 12) {             hours = hours;             minutes = minutes + " pm";         } else {             hours = hours - 12;             minutes = minutes + " pm";         }     } else {         hours = hours;         minutes = minutes + " am";     }     if (hours == 0) {         hours = 12;         minutes = minutes;     }     //console.log(ui.handle)     $(ui.handle).attr('data-value', hours + ':' + minutes); };  var timelabels = ["12:00 a.m","1:00 a.m","2:00 a.m","3:00 a.m","4:00 a.m","5:00 a.m","6:00 a.m","7:00 a.m","8:00 a.m","9:00 a.m","10:00 a.m","11:00 a.m",                   "12:00 p.m","1:00 p.m","2:00 p.m","3:00 p.m","4:00 p.m","5:00 p.m","6:00 p.m","7:00 p.m","8:00 p.m","9:00 p.m","10:00 p.m","11:00 p.m", "12:00 p.m"]; (function ($) {     $.widget('my-namespace.customslider', $.ui.slider, {         options: {             ticks: false         },          // called when slider instantiated.         _create: function() {              // call orginal constructor, creating slider normally.             this._super();              // if "ticks" option false or "step" option             // less 5, there's nothing do.             if ( !this.options.ticks || this.options.step < 5 ) {                 return;             }              // setup variables rendering tick marks below slider.             var cnt = this.options.min,                 background = this.element.css( "border-color" ),                 left;              while ( cnt <= this.options.max ) {                  // compute "left" css property next tick mark.                 left = ( cnt / this.options.max * 100 ).tofixed( 2 ) + "%";                  // creates tick div, , adds element. adds                 // "ui-slider-tick" class, has common properties each tick.                 // applies computed css properties, "left" , "background".                 //console.log($("</div>"))                 $( "<div/>" ).addclass( "ui-slider-tick" )                              .appendto( this.element )                              .css( { left: left, background: background } );                  cnt += this.options.step;              }             console.log(this.element[0].id)             cnt = this.options.min             var = 0;             while (cnt <= this.options.max) {                 //console.log(timelabels[i])                 $($(".pct-slider#" + this.element[0].id).find('.ui-slider-tick')[cnt]).append("<div class='tick-labels'>" + timelabels[i] + "</div>");                 cnt = cnt + 4;                 i++;             }             //$(".pct-slider#" + sliders[0]).find('.ui-slider-tick').find('.tick-labels').hide()         },         addvalue: function( val ) {             this.options.values.push(val);             console.log(val)             var time = converttotime(val)             console.log(time)             this._refresh();             $($(".ui-slider-handle").last()).attr('data-value', time)         },         removevalue: function( ) {             if (this.options.values.length > 1) {                 this.options.values.pop( );                 this._refresh();             }         }     }); })(jquery);  var sliders =["mondayslider", "tuesdayslider","wednesdayslider","thursdayslider","fridayslider","saturdayslider","sundayslider"];  $(".pct-slider#" + sliders[0]) .customslider({     min: 0,     max: 1440,     step: 15,     range: false,     ticks: true,     values: initialvalues,     create: function (event, ui) {         $.each( initialvalues, function(i, v){             updatevalue({                 value: v,                 handle: $(".pct-slider#" + sliders[0]).find('.ui-slider-handle').eq(i)              });         });     },     slide: function (event, ui) {         var handleindex = $('a', event.target).index(ui.handle),             curr = ui.values[handleindex],             next = ui.values[handleindex + 1] - 15,             prev = ui.values[handleindex - 1] + 15;          if (curr > next || curr < prev) {             return false;         }          updatevalue(ui);         //positionselects();     } }); 

i trying append divs onto handles, when append div makes handle disappear. thought append div on 2 handles , color background of div. not working out me though.

heres fiddle of initial slider looks : http://jsfiddle.net/5ttm4/3095/

i want color between sets of handles

you can add div inside slider , resize them when move handles. proper css it'll give effect you're describing. may need tweak little bit, should give ideas:

html

//you add divs inside slider, need four, last region  /background of slider <div class="pct-slider" id="mondayslider">      <div class="color-region"></div>     <div class="color-region"></div>     <div class="color-region"></div>     <div class="color-region"></div>   </div> 

css

 //make divs relative , give them color     .color-region     {         position: relative;         height: 100%;         float: left;     }  .color-region:nth-child(1) {     background-color: blue; } .color-region:nth-child(1) {     background-color: blue; } .color-region:nth-child(2) {     background-color: red; } .color-region:nth-child(3) {     background-color: yellow; } .color-region:nth-child(4) {     background-color: green; } 

js

function resize_colors() {        //you start @ 0         var cur_pos = 0;         $(".ui-slider-handle").each(function (i) {             //for each handle check position , set width of corresponding color div             $('.color-region').eq(i).css('width', $(this).position().left - cur_pos)           //update cur_pos calculate next color width             cur_pos = $(this).position().left;         })     } 

you'll see doesn't follow on slide event, part of because slide event triggered when moves only, when stop, there's moment not updating. maybe if run resize color on other event give better result.

see fiddle:http://jsfiddle.net/t4veqohy/1/