.double-label-slider.ui-slider { margin-top: 10px; height: 6px; background: #dddddd; border: none; border-radius: 0; } .double-label-slider.ui-slider .ui-slider-handle { background: #00acf0; border: none; width: 1em !important; height: 1em !important; margin-left: -7px; border-radius: 100%; outline: medium none; position: absolute; top: -5px; z-index: 2; transition: box-shadow 0.2s ease; } .double-label-slider.ui-slider .ui-slider-handle.ui-state-hover, .double-label-slider.ui-slider .ui-slider-handle.ui-state-focus, .double-label-slider.ui-slider .ui-slider-handle.ui-state-active { box-shadow: 0 0 0 1px #00acf0; } .double-label-slider.ui-slider .ui-slider-handle.childSlider.ui-state-hover, .double-label-slider.ui-slider .ui-slider-handle.childSlider.ui-state-focus, .double-label-slider.ui-slider .ui-slider-handle.childSlider.ui-state-active { box-shadow: 0 0 0 1px #ab26aa; } .double-label-slider.ui-slider .ui-slider-pip { top: -3px; } .double-label-slider.ui-slider .ui-slider-pip .ui-slider-line { background: white; width: 12px; height: 12px; margin-left: -5px; box-shadow: 0 0 0 2px #00acf0; border-radius: 100%; transition: all 0.4s ease; } .double-label-slider.ui-slider .ui-slider-pip .ui-slider-label, .double-label-slider.ui-slider .ui-slider-pip .ui-slider-label i, .double-label-slider.ui-slider .ui-slider-pip .ui-slider-label span { width: 100px; margin-left: -50px; text-align: center; } .double-label-slider.ui-slider .ui-slider-pip .ui-slider-label { color: #888888; } .double-label-slider.ui-slider .ui-slider-pip .ui-slider-label i { font-style: normal; font-size: 1.8em; position: absolute; top: -36px; } .double-label-slider.ui-slider .ui-slider-pip .ui-slider-label span { opacity: 0.6; /*font-size: 1.2em;*/ line-height: 1.3; position: absolute; top: 18px; transition: opacity 0.3s ease; } .double-label-slider.ui-slider .ui-slider-pip:hover .ui-slider-label span, .double-label-slider.ui-slider .ui-slider-pip:focus .ui-slider-label span, .double-label-slider.ui-slider .ui-slider-pip.ui-slider-pip-selected .ui-slider-label span { opacity: 1; } .double-label-slider.ui-slider .ui-slider-pip.ui-slider-pip-selected .ui-slider-label { /*color: black;*/ } .double-label-slider.ui-slider .ui-slider-pip.ui-slider-pip-selected .ui-slider-line { position: absolute; z-index: 1; }