input.circle-range-select { display: none }

.circle-range-select-wrapper {
  position: relative;
  max-width: 100%;
  width: 100px;
  border-radius: 50%;
  border: 5px solid #ccc;
  cursor: default
}

.circle-range-select-wrapper .handle {
  position: absolute;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  cursor: pointer;
  z-index: 2;
  background: #000
}

.circle-range-select-wrapper .selected-range {
  position: absolute;
  top: -5px;
  left: -5px;
  z-index: 1;
  color: green
}

.circle-range-select-wrapper .values {
  position: absolute;
  top: 50%;
  margin-top: -.5em;
  width: 100%;
font-size:.85rem;
  text-align: center;
  z-index: 2
}