@ustack/uskin/css/components/slider.less

A graceful framework which provides developers another chance to build an amazing site.

@slider_bg_color: @color_grey_400;
@slider_track_bg_color: @color_info_200;
@slider_default_bg_color: @color_info_200;
@slider_thumb_bg_color: @color_info;
@slider_thumb_color: #fff;
@slider_disabled_track_bg_color: @color_disabled_400;
@slider_disabled_thumb_bg_color: @color_disabled_700;

.slider {
  position: relative;
  height: 16px;
  background-color: @slider_bg_color;
  border-radius: 2px;
  user-select: none;
  cursor: pointer;
  width: 300px;

  .slider-track {
    width: 0;
    height: 100%;
    background-color: @slider_track_bg_color;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    &.animate {
      transition:width .5s;
    }
  }

  .slider-default {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background-color: @slider_default_bg_color;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
  }

  .slider-thumb {
    position: absolute;
    left: 0;
    top: -3px;
    width: 1px;
    height: 12px;
    border: 5px solid @slider_thumb_bg_color;
    border-radius: 1px;
    background-color: @slider_thumb_color;
    cursor: pointer;
    margin-left: -5px;
    &.animate {
      transition:left .5s;
    }
  }

  &.disabled {
    cursor: default;
    .slider-track {
      background-color: @slider_disabled_track_bg_color;
    }
    .slider-thumb {
      cursor: default;
      border-color: @slider_disabled_thumb_bg_color;
    }
  }

  &.noclick {
    cursor: default;
  }
}