CSS for range limit styles found at collections.leventhalmap.org

nblmc-collections-range-limit.scss

.range_limit {

  .form-control {

    &.range_begin,
    &.range_end {
      width: 60px;
    }
  }
}

.limit_content.range_limit {

  form {
    text-align: center;

    .form-control {
      width: 60px;
    }

    .btn.submit {
      padding: 3px 10px;
    }
  }

  .range.slider_js {
    margin: 0 0 -12px;
    z-index: 11;
    position: relative;

    .slider.slider-horizontal {
      width: auto !important;
      margin-left: 11px !important;
      margin-right: 5px !important;
      margin-top: 13px !important;
    }

    .slider-track {
      height: 10px;
      width: 100%;
      margin-top: -4px;
      top: 50%;
      left: 0;
      background: #545454;
      border-radius: 0;
      border-top: 2px solid #535353;

      .slider-selection {
        background: #efe6d7;
        border-radius: 0;
        box-shadow: none;
      }
    }

    .slider-handle {
      background: $brand-secondary;
      border-radius: 4px;

      &:after {
        content: '';
        display: block;
        position: absolute;
        color: white;
        border-left: 1px solid #fff;
        border-right: 1px solid #fff;
        width: 4px;
        height: 12px;
        box-shadow: 2px 0 0 #006688, 3px 0 0 white;
        top: 50%;
        left: 0;
        -webkit-transform: translate(6px, -50%);
            -ms-transform: translate(6px, -50%);
                transform: translate(6px, -50%);
      }
    }
  }

  .distribution canvas {
    min-width: 231px;
  }

  ul.missing {
    margin: 0;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #ddd;

    .facet-label {
      width: 78%;
    }
  }
}