彩色和编号范围滑块JQuery

Question

我需要一个看起来像这样的滑块：

我找到了一个彩色滑块here。但它没有数字。并不完全按照我的要求做。我尝试手动添加数字，但我仍然无法达到要求的结果。

HTML

<h1>Color Range Slider</h1>

<div id="slider-container">
  <div id="js-slider"></div>
  <div class="number-line"> 
    <span class="number-line-num"> 0 </span>
    <span class="number-line-num"> 100 </span>
    <span class="number-line-num"> 200 </span>
    <span class="number-line-num"> 300 </span>
    <span class="number-line-num"> 400 </span>
    <span class="number-line-num"> 500 </span>
    <span class="number-line-num"> 600 </span>
    <span class="number-line-num"> 700 </span>
    <span class="number-line-num"> 800 </span>
    <span class="number-line-num"> 900 </span>

  </div>
</div>

CSS

@import "bourbon";

//custom
.number-line
{
  margin-top:1%;
 // float:left;
 // width:100%;
}

.number-line-num{
  padding-right:4.3em;
}

// 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;
      }
    }
  }
}

JS

# 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)

感谢任何帮助。