.Slider {
  position: relative;
  height: 28px;
  margin: 0 14px;
  }

  .Slider::before {
    position: absolute;
    left: 0;
    top: 12px;
    height: 4px;
    width: 100%;
    background-color: var(--placeholder_icon_background);
    border-radius: 2px;
    content: '';
    }

  .Slider__in {
    height: 100%;
    }

  .Slider__dragger {
    position: absolute;
    top: 12px;
    left: 0;
    width: 0;
    height: 0;
    }

  .Slider__dragger::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--accent);
    border-radius: 2px;
    content: '';
    }

  .Slider__thumb {
    position: absolute;
    top: -12px;
    width: 28px;
    height: 28px;
    transition: transform .1s ease;
    }

    .Slider__thumb--start {
      left: -14px;
      }

    .Slider__thumb--end {
      right: -14px;
      }

/**
 * iOS
 */
.Slider--ios {
  }

  .Slider--ios .Slider__in {}

    .Slider--ios .Slider__thumb {
      border-radius: 14px;
      background: var(--white);
      box-shadow: 0 2px 7px rgba(0, 0, 0, .35), 0 1px 1px rgba(0, 0, 0, .15);
      }

/**
 * Android
 */
.Slider--android {
  }

  .Slider--ios .Slider__in {}

    .Slider--android .Slider__thumb::before {
      position: absolute;
      top: 4px;
      left: 4px;
      width: 20px;
      height: 20px;
      content: '';
      background: var(--white);
      border-radius: 10px;
      box-shadow: 0 1px 3px 0 var(--separator_common), 0 0 1px 0 var(--separator_common), 0 0 0 .5px rgba(0, 0, 0, .04);
      }