.yu-slider {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
  margin: 0 8px 14px 0; }
  .yu-slider.disabled > .bottom-bar > .top-bar {
    background-color: #c5c7ca; }
    .yu-slider.disabled > .bottom-bar > .top-bar > .circle {
      border-color: #c5c7ca; }
  .yu-slider > .bottom-bar {
    position: relative;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background-color: #E4E7ED; }
    .yu-slider > .bottom-bar > .top-bar {
      height: 4px;
      border-radius: 2px;
      background-color: #409EFF; }
      .yu-slider > .bottom-bar > .top-bar > .circle {
        transform: translateX(-8px);
        position: absolute;
        top: -6px;
        box-sizing: border-box;
        line-height: 14px;
        vertical-align: middle;
        display: inline-block;
        width: 14px;
        height: 14px;
        background-color: #fff;
        border: 2px solid #409EFF;
        border-radius: 14px; }
        .yu-slider > .bottom-bar > .top-bar > .circle > .tooltip {
          box-sizing: content-box;
          position: absolute;
          top: -36px;
          height: 20px;
          padding: 2px 7px;
          line-height: 20px;
          background: #373737;
          border-radius: 4px;
          color: #fff;
          font-size: 14px;
          margin-left: -12px;
          text-align: center;
          min-width: 20px;
          display: none; }
          .yu-slider > .bottom-bar > .top-bar > .circle > .tooltip:after {
            content: '';
            display: inline-block;
            height: 8px;
            width: 8px;
            background-color: #373737;
            position: absolute;
            bottom: -4px;
            left: 14px;
            transform: rotate(45deg); }
        .yu-slider > .bottom-bar > .top-bar > .circle.hover {
          width: 16px;
          height: 16px; }
          .yu-slider > .bottom-bar > .top-bar > .circle.hover > .tooltip {
            display: inline-block; }
        .yu-slider > .bottom-bar > .top-bar > .circle:hover {
          width: 16px;
          height: 16px; }
          .yu-slider > .bottom-bar > .top-bar > .circle:hover > .tooltip {
            display: inline-block; }
      .yu-slider > .bottom-bar > .top-bar > .point {
        position: absolute;
        width: 4px;
        height: 4px;
        background-color: #fff;
        border-radius: 2px; }
    .yu-slider > .bottom-bar:hover {
      cursor: pointer; }
  .yu-slider input {
    display: none; }