1 $rangeInputThumbSize: 14; 2 3 /** 4 * Disable the default webkit styles for range inputs (sliders). 5 */ 6 input[type=range]{ 7 -webkit-appearance: none; 8 background: none; 9 } 10 11 /** 12 * Show focus for keyboard accessibility. 13 */ 14 input[type=range]:focus { 15 outline: 1px solid white !important; 16 } 17 18 /** 19 * Include the mixin for a range input style. 20 */ 21 @include slider { 22 background: #474747; 23 border: none; 24 border-radius: 3px; 25 cursor: pointer; 26 height: 6px; 27 width: 100%; 28 } 29 30 /** 31 * Include the mixin for a range input thumb style. 32 */ 33 @include slider-thumb { 34 -webkit-appearance: none; 35 background: white; 36 border: 1px solid #3572b0; 37 border-radius: 50%; 38 box-shadow: 0px 0px 1px #3572b0; 39 cursor: pointer; 40 height: 14px; 41 margin-top: -4px; 42 width: 14px; 43 }