Kitchen-sink Slider Problem

<script type="text/javascript"> 
$(function() { 
	$('select').selectToUISlider({ labels: 0, labelSrc: 'text', tooltip: false, sliderOptions: {
        animate:true,
        stop: function(e,ui) {
            index = $('select').val();
            var slideHandle = $('#handle-gradient');
            if (index == 0) { 
              slideHandle.css({background: "linear-gradient(to right, rgba(229,124,106,1.0), rgba(229,124,106,0))", width: "50%", left: "99%"}); 
            } else if (index == 4) {
              slideHandle.css({background: "linear-gradient(to right, rgba(229,124,106,0), rgba(229,124,106,1.0))", width: "50%", left: "-49%"});
            } else {
              slideHandle.css({background: "radial-gradient(circle, rgba(229,124,106,0.0) 0%, rgba(229,124,106,0.0) 48%, rgb(229, 124, 106) 49%, rgba(229,124,106,0.0) 100%)", width: "200%", left: "-49.5%"});
            }  
        }
      }}).hide();
  
  var color = "rgb(229, 124, 106)"; //$(".question .wrap").css("border-left-color");
  var transparentColor = color.replace(/rgb/i, "rgba").replace(/\)/i,',0.0)');
  $(".progress").trigger("configure", {"fgColor": color});
  handle = $(".ui-slider-handle").css("background-color", color);
  gradient = retrieveOrCreateDivWithId('handle-gradient');
  gradient.css({background: "radial-gradient(circle, rgba(229,124,106,0.0) 0%, rgba(229,124,106,0.0) 48%, rgb(229, 124, 106) 49%, rgba(229,124,106,0.0) 100%)"});
  handle = $(".ui-slider-handle").css("background-color", color).prepend(gradient);
});
</script>