<h1>Color Range Slider</h1>

<div id="slider-container">
  <div id="js-slider"></div>
</div>
@import "bourbon";

// Settings
$slider-track--color--default: #CCC;
$slider-track--color--start: #1ABC9C;
$slider-track--color--middle: #F1C40F;
$slider-track--color--end: #E74C3C;
$slider-track--radius: 10px;
$slider-track--height: 14px;
$slider-track--border-width: 0;
$slider-handle--size: 28px;
$slider-handle--dot--size: $slider-handle--size - 10px;

%track--defaults {
  height: $slider-track--height;
  border: {
    radius: $slider-track--radius;
    width: $slider-track--border-width;
  }
}

// Layout
body {
  background: #F0F0F0;
  font-family: Helvetica, Arial;
}

h1 {
  text-align: center;
  color: #444;
  margin-top: 50px;
}
  
#slider-container {
  width: 80%;
  height: 80px;
  @include box-sizing(border-box);
  position: relative;
  top: 50%;
  margin: 0 auto;
  text-align: center;
  background: #FFF;
  border-radius: 5px;
  padding: 35px 40px 30px 40px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

// Slider widget
.ui-slider {
  * { outline: none; }
  @extend %track--defaults;
  
  @include linear-gradient(to right, $slider-track--color--start 0%, $slider-track--color--middle 50%, $slider-track--color--end 100%);
  
  .slider-range-inverse {
    @extend %track--defaults;
    background: $slider-track--color--default;
    position: absolute;
    right: 0;
  }
  
  .ui-slider-range {
    @extend %track--defaults;
    background: transparent; 
  }
  
  .ui-slider-handle {
    width: $slider-handle--size;
    height: $slider-handle--size;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
    background: #FFF;
    top: -($slider-handle--size - $slider-track--height) / 2;
    border: {
      radius: 50%;
      width: 0;
    }
    
    &:active { box-shadow: 0 3px 20px rgba(0,0,0,0.5); }
        
    .dot {
      width: $slider-handle--dot--size;
      height: $slider-handle--dot--size;
      border-radius: 50%;
      position: absolute;
      top: ($slider-handle--size - $slider-handle--dot--size) / 2;
      left: ($slider-handle--size - $slider-handle--dot--size) / 2;
      background: transparent;
      overflow: hidden;
      
      .handle-track {
        display: block;
        height: $slider-handle--dot--size;
        @include linear-gradient(to right, $slider-track--color--start 0%, $slider-track--color--middle 50%, $slider-track--color--end 100%);
        position: absolute;
        padding-right: $slider-handle--dot--size;
      }
    }
  }
}
View Compiled
# Helper function
update_handle_track_pos = (slider, ui_handle_pos) ->
  handle_track_xoffset = -((ui_handle_pos/100) * slider.clientWidth)
  $(slider).find(".handle-track").css("left", handle_track_xoffset)
  
  slider_range_inverse_width = (100 - ui_handle_pos) + "%";
  $(slider).find(".slider-range-inverse").css("width", slider_range_inverse_width)

# Init slider
$("#js-slider").slider
  range: "min"
  max: 100
  value: 50
  create: (event, ui) ->
    slider = $(event.target)
    
    # Append the slider handle with a center dot and it's own track
    slider.find('.ui-slider-handle').append('<span class="dot"><span class="handle-track"></span></span>')
    
    # Append the slider with an inverse range
    slider.prepend('<div class="slider-range-inverse"></div>')
     
    # Set initial dimensions
    slider.find(".handle-track").css("width", event.target.clientWidth)
    
    # Set initial position for tracks
    update_handle_track_pos(event.target, $(this).slider("value"))
    
  slide: (event, ui) ->
    # Update position of tracks
    update_handle_track_pos(event.target, ui.value)
View Compiled

External CSS

  1. //ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js