dh-c/dist/slider/slider.css

The front-end development engineers jimberton gulp react component

.dh-slider {
  position: relative;
  margin: 10px 6px;
  height: 12px;
  border-radius: 5px;
  background-color: #e9e9e9;
  cursor: pointer;
  border-top: 4px solid #fff;
  border-bottom: 4px solid #fff;
  transition: background-color 0.3s ease; }
  .dh-slider-track {
    position: absolute;
    left: 0;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(to right, #2ad450, #12d8db);
    z-index: 1;
    transition: background-color 0.3s ease; }
  .dh-slider-step {
    position: absolute;
    width: 100%;
    height: 4px;
    background: transparent;
    z-index: 1; }
  .dh-slider-dot {
    position: absolute;
    top: -2px;
    width: 8px;
    height: 8px;
    border: 2px solid #e9e9e9;
    background-color: #fff;
    cursor: pointer;
    border-radius: 50%;
    vertical-align: middle; }
    .dh-slider-dot-active {
      border-color: #23c132; }
  .dh-slider-handle {
    position: absolute;
    cursor: pointer;
    background-color: #fff;
    z-index: 2;
    top: 50%;
    width: 16px;
    height: 16px;
    line-height: 1;
    transform: translate(-50%, -50%); }
    .dh-slider-handle:after {
      font-family: dhfont !important;
      color: #23c132;
      content: '\e71f';
      font-size: 16px; }
  .dh-slider-mark {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    font-size: 12px;
    z-index: 3; }
    .dh-slider-mark-text {
      position: absolute;
      display: inline-block;
      vertical-align: middle;
      text-align: center;
      cursor: pointer; }
      .dh-slider-mark-text-active {
        color: #666666; }
  .dh-slider-tooltip {
    position: absolute;
    left: -9999px;
    top: -9999px;
    z-index: 1050;
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5; }
    .dh-slider-tooltip-arrow {
      position: absolute;
      width: 10px;
      height: 10px;
      border: 1px solid rgba(31, 56, 88, 0.2);
      background-color: #fff;
      transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      box-shadow: 0 1px 4px 0 rgba(31, 56, 88, 0.15); }
    .dh-slider-tooltip-content {
      background-color: #f6f6f6;
      border: 1px solid #e6e6e6;
      border-radius: 3px;
      box-shadow: 0 1px 4px 0 rgba(31, 56, 88, 0.15); }
    .dh-slider-tooltip-hidden {
      display: none; }
    .dh-slider-tooltip-inner {
      position: relative;
      z-index: 2;
      padding: 6px 16px;
      color: #666666;
      text-align: center;
      color: rgba(31, 56, 88, 0.8);
      text-decoration: none;
      border-radius: 3px;
      background-color: #fff; }
    .dh-slider-tooltip-placement-left, .dh-slider-tooltip-placement-leftBottom, .dh-slider-tooltip-placement-leftTop {
      margin-left: -3px;
      padding: 0 6px; }
      .dh-slider-tooltip-placement-left .dh-slider-tooltip-arrow, .dh-slider-tooltip-placement-leftBottom .dh-slider-tooltip-arrow, .dh-slider-tooltip-placement-leftTop .dh-slider-tooltip-arrow {
        right: 2px; }
    .dh-slider-tooltip-placement-leftTop .dh-slider-tooltip-arrow {
      top: 8px; }
    .dh-slider-tooltip-placement-left .dh-slider-tooltip-arrow {
      top: 50%;
      margin-top: -4px; }
    .dh-slider-tooltip-placement-leftBottom .dh-slider-tooltip-arrow {
      bottom: 8px; }
    .dh-slider-tooltip-placement-right, .dh-slider-tooltip-placement-rightBottom, .dh-slider-tooltip-placement-rightTop {
      margin-left: 3px;
      padding: 0 6px; }
      .dh-slider-tooltip-placement-right .dh-slider-tooltip-arrow, .dh-slider-tooltip-placement-rightBottom .dh-slider-tooltip-arrow, .dh-slider-tooltip-placement-rightTop .dh-slider-tooltip-arrow {
        left: 2px; }
    .dh-slider-tooltip-placement-rightTop .dh-slider-tooltip-arrow {
      top: 8px; }
    .dh-slider-tooltip-placement-right .dh-slider-tooltip-arrow {
      top: 50%;
      margin-top: -4px; }
    .dh-slider-tooltip-placement-rightBottom .dh-slider-tooltip-arrow {
      bottom: 8px; }
    .dh-slider-tooltip-placement-top, .dh-slider-tooltip-placement-topLeft, .dh-slider-tooltip-placement-topRight {
      margin-top: -3px;
      padding: 6px 0; }
      .dh-slider-tooltip-placement-top .dh-slider-tooltip-arrow, .dh-slider-tooltip-placement-topLeft .dh-slider-tooltip-arrow, .dh-slider-tooltip-placement-topRight .dh-slider-tooltip-arrow {
        bottom: 2px; }
    .dh-slider-tooltip-placement-top .dh-slider-tooltip-arrow {
      left: 50%;
      margin-left: -6px; }
    .dh-slider-tooltip-placement-topLeft .dh-slider-tooltip-arrow {
      left: 12px; }
    .dh-slider-tooltip-placement-topRight .dh-slider-tooltip-arrow {
      right: 12px; }
    .dh-slider-tooltip-placement-bottom, .dh-slider-tooltip-placement-bottomLeft, .dh-slider-tooltip-placement-bottomRight {
      margin-top: 3px;
      padding: 6px 0; }
      .dh-slider-tooltip-placement-bottom .dh-slider-tooltip-arrow, .dh-slider-tooltip-placement-bottomLeft .dh-slider-tooltip-arrow, .dh-slider-tooltip-placement-bottomRight .dh-slider-tooltip-arrow {
        top: 2px; }
    .dh-slider-tooltip-placement-bottomLeft .dh-slider-tooltip-arrow {
      left: 12px; }
    .dh-slider-tooltip-placement-bottom .dh-slider-tooltip-arrow {
      left: 50%;
      margin-left: -6px; }
    .dh-slider-tooltip-placement-bottomRight .dh-slider-tooltip-arrow {
      right: 12px; }

.dh-slider-reverse {
  background: linear-gradient(to right, #2ad450, #12d8db); }
  .dh-slider-reverse .dh-slider-track {
    background: #e9e9e9; }