/* === UI Slider Container === */
.ui-slider {
  position: relative;
  text-align: left;
  background: #ddd;
  border-radius: 4px;
  height: 0.4em;
}

/* === Horizontal Slider === */
.ui-slider-horizontal {
  height: 8px;
}

/* === Handle (Draggable Knob) === */
.ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: pointer;
  background: #f7f7f7;
  border: 1px solid #aaa;
  border-radius: 50%;
  top: -0.4em;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* === Range (Filled Portion) === */
.ui-slider-range {
  position: absolute;
  z-index: 1;
  display: block;
  background: #0073e6;
  border-radius: 4px;
  height: 100%;
}