slider.css

/* Copyright 2013 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

/* Customize the standard input[type='range']. */
.slider > input[type='range'] {
  -webkit-appearance: none !important;  /* Hide the default thumb icon. */
  background: transparent;  /* Hide the standard slider bar */
  height: 100%;
  left: -2px;  /* Required to align the input element with the parent. */
  position: absolute;
  top: -2px;
  width: 100%;
}

/* Custom thumb icon. */
.slider > input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-position: center center;
  background-repeat: no-repeat;
  height: 24px;
  position: relative;
  z-index: 2;
}

/* Custom slider bar (we hide the standard one). */
.slider > .bar {
  /* In order to match the horizontal position of the standard slider bar
     left and right must be equal to 1/2 of the thumb icon width. */
  left: 8px;
  right: 8px;
  bottom: 10px;
  pointer-events: none;  /* Mouse events pass through to the standard input. */
  position: absolute;
  top: 10px;
  background-image: url(../images/slider/slide_bar_center.png);
  height: 4px;
}

.slider > .bar > .filled,
.slider > .bar > .cap {
  position: absolute;
}

/* The filled portion of the slider bar to the left of the thumb. */
.slider > .bar > .filled {
  border-left-style: none;
  border-right-style: none;
  left: 0;
  width: 0; /* The element style.width is manipulated from the code. */
}

.slider > .bar > .cap.right {
  background-image: url(../images/slider/slider_bar_right.png);
  height: 4px;
  width: 4px;
  left: 100%;
}

.slider > .bar > .filled {
  background-image: url(../images/slider/slide_bar_fill_center.png);
  height: 4px;
}

.slider > .bar > .cap.left {
  background-image: url(../images/slider/slide_bar_fill_left.png);
  height: 4px;
  width: 4px;
  right: 100%;
}

.slider.disabled  > .bar {
  background-image: url(../images/slider/slide_bar_disabled_center.png);
}

.slider.disabled  > .bar > .filled {
  background-image: url(../images/slider/slide_bar_disabled_center.png);
}

.slider.disabled  > .bar > .cap.left {
  background-image: url(../images/slider/slide_bar_disabled_left.png);
}

.slider.disabled  > .bar > .cap.right {
  background-image: url(../images/slider/slide_bar_disabled_right.png);
}

.slider.disabled,
.slider.readonly {
  pointer-events: none;
}

.slider {
  -webkit-box-flex: 1;
}

.slider > input[type='range']::-webkit-slider-thumb {
  background-image: url(../images/slider/slider_thumb.png);
  width: 16px;
}

.slider > input[type='range']::-webkit-slider-thumb:hover {
  background-image: url(../images/slider/slider_thumb_hover.png);
}

.slider > input[type='range']::-webkit-slider-thumb:active {
  background-image: url(../images/slider/slider_thumb_down.png);
}

.slider.disabled > input[type='range']::-webkit-slider-thumb {
  background-image: url(../images/slider/slider_thumb_disabled.png);
}