.slider { display: inline-block; vertical-align: middle; position: relative; } .slider.slider-horizontal { width: 210px; height: 20px; } .slider.slider-horizontal .slider-track { height: 10px; width: 100%; margin-top: -5px; top: 50%; left: 0; } .slider.slider-horizontal .slider-selection, .slider.slider-horizontal .slider-track-low, .slider.slider-horizontal .slider-track-high { height: 100%; top: 0; bottom: 0; } .slider.slider-horizontal .slider-tick, .slider.slider-horizontal .slider-handle { margin-left: -10px; } .slider.slider-horizontal .slider-tick.triangle, .slider.slider-horizontal .slider-handle.triangle { position: relative; top: 50%; transform: translateY(-50%); border-width: 0 10px 10px 10px; width: 0; height: 0; border-bottom-color: #0480BE; margin-top: 0; } .slider.slider-horizontal .slider-tick-container { white-space: nowrap; position: absolute; top: 0; left: 0; width: 100%; } .slider.slider-horizontal .slider-tick-label-container { white-space: nowrap; margin-top: 20px; } .slider.slider-horizontal .slider-tick-label-container .slider-tick-label { display: inline-block; padding-top: 24px; text-align: center; } .slider.slider-horizontal.slider-rtl .slider-track { left: initial; right: 0; } .slider.slider-horizontal.slider-rtl .slider-tick, .slider.slider-horizontal.slider-rtl .slider-handle { margin-left: initial; margin-right: -10px; } .slider.slider-horizontal.slider-rtl .slider-tick-container { left: initial; right: 0; } .slider.slider-vertical { height: 210px; width: 20px; } .slider.slider-vertical .slider-track { width: 10px; height: 100%; left: 25%; top: 0; } .slider.slider-vertical .slider-selection { width: 100%; left: 0; top: 0; bottom: 0; } .slider.slider-vertical .slider-track-low, .slider.slider-vertical .slider-track-high { width: 100%; left: 0; right: 0; } .slider.slider-vertical .slider-tick, .slider.slider-vertical .slider-handle { margin-top: -10px; } .slider.slider-vertical .slider-tick.triangle, .slider.slider-vertical .slider-handle.triangle { border-width: 10px 0 10px 10px; width: 1px; height: 1px; border-left-color: #0480BE; margin-left: 0; } .slider.slider-vertical .slider-tick-label-container { white-space: nowrap; } .slider.slider-vertical .slider-tick-label-container .slider-tick-label { padding-left: 4px; } .slider.slider-vertical.slider-rtl .slider-track { left: initial; right: 25%; } .slider.slider-vertical.slider-rtl .slider-selection { left: initial; right: 0; } .slider.slider-vertical.slider-rtl .slider-tick.triangle, .slider.slider-vertical.slider-rtl .slider-handle.triangle { border-width: 10px 10px 10px 0; } .slider.slider-vertical.slider-rtl .slider-tick-label-container .slider-tick-label { padding-left: initial; padding-right: 4px; } .slider.slider-disabled .slider-handle { background-color: #F7F7F7; background-image: -moz-linear-gradient(top, #DFDFDF, #BEBEBE); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#DFDFDF), to(#BEBEBE)); background-image: -webkit-linear-gradient(top, #DFDFDF, #BEBEBE); background-image: -o-linear-gradient(top, #DFDFDF, #BEBEBE); background-image: linear-gradient(to bottom, #DFDFDF, #BEBEBE); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DFDFDF', endColorstr='#BEBEBE',GradientType=0); } .slider.slider-disabled .slider-track { background-color: #F7F7F7; background-image: -moz-linear-gradient(top, #E5E5E5, #E9E9E9); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#E5E5E5), to(#E9E9E9)); background-image: -webkit-linear-gradient(top, #E5E5E5, #E9E9E9); background-image: -o-linear-gradient(top, #E5E5E5, #E9E9E9); background-image: linear-gradient(to bottom, #E5E5E5, #E9E9E9); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E5E5E5', endColorstr='#E9E9E9',GradientType=0); cursor: not-allowed; } .slider input { display: none; } .slider .tooltip-inner { white-space: nowrap; max-width: none; } .slider .tooltip.top { margin-top: -36px; } .slider .tooltip-inner { white-space: nowrap; max-width: none; } .slider .hide { display: none; } .slider-track { background-color: #F7F7F7; background-image: -moz-linear-gradient(top, #F5F5F5, #F9F9F9); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F5F5F5), to(#F9F9F9)); background-image: -webkit-linear-gradient(top, #F5F5F5, #F9F9F9); background-image: -o-linear-gradient(top, #F5F5F5, #F9F9F9); background-image: linear-gradient(to bottom, #F5F5F5, #F9F9F9); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F5F5F5', endColorstr='#F9F9F9',GradientType=0); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; position: absolute; cursor: pointer; } .slider-selection { background-color: #F7F7F7; background-image: -moz-linear-gradient(top, #F9F9F9, #F5F5F5); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F9F9F9), to(#F5F5F5)); background-image: -webkit-linear-gradient(top, #F9F9F9, #F5F5F5); background-image: -o-linear-gradient(top, #F9F9F9, #F5F5F5); background-image: linear-gradient(to bottom, #F9F9F9, #F5F5F5); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F9F9F9', endColorstr='#F5F5F5',GradientType=0); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; position: absolute; } .slider-selection.tick-slider-selection { background-color: #F7F7F7; background-image: -moz-linear-gradient(top, #89CDEF, #81BFDE); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#89CDEF), to(#81BFDE)); background-image: -webkit-linear-gradient(top, #89CDEF, #81BFDE); background-image: -o-linear-gradient(top, #89CDEF, #81BFDE); background-image: linear-gradient(to bottom, #89CDEF, #81BFDE); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#89CDEF', endColorstr='#81BFDE',GradientType=0); } .slider-track-low, .slider-track-high { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: absolute; background: transparent; border-radius: 4px; } .slider-handle { background-color: #0E90D2; background-image: -moz-linear-gradient(top, #149BDF, #0480BE); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149BDF), to(#0480BE)); background-image: -webkit-linear-gradient(top, #149BDF, #0480BE); background-image: -o-linear-gradient(top, #149BDF, #0480BE); background-image: linear-gradient(to bottom, #149BDF, #0480BE); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149BDF', endColorstr='#0480BE',GradientType=0); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); position: absolute; top: 0; width: 20px; height: 20px; background-color: #337AB7; border: 0px solid transparent; } .slider-handle.round { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .slider-handle.triangle { background: transparent none; } .slider-handle.custom { background: transparent none; } .slider-handle.custom::before { line-height: 20px; font-size: 20px; content: '\2605'; color: #726204; } .slider-tick { background-color: #F7F7F7; background-image: -moz-linear-gradient(top, #F9F9F9, #F5F5F5); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F9F9F9), to(#F5F5F5)); background-image: -webkit-linear-gradient(top, #F9F9F9, #F5F5F5); background-image: -o-linear-gradient(top, #F9F9F9, #F5F5F5); background-image: linear-gradient(to bottom, #F9F9F9, #F5F5F5); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F9F9F9', endColorstr='#F5F5F5',GradientType=0); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: absolute; width: 20px; height: 20px; filter: none; opacity: 0.8; border: 0px solid transparent; } .slider-tick.round { border-radius: 50%; } .slider-tick.triangle { background: transparent none; } .slider-tick.custom { background: transparent none; } .slider-tick.custom::before { line-height: 20px; font-size: 20px; content: '\2605'; color: #726204; } .slider-tick.in-selection { background-color: #F7F7F7; background-image: -moz-linear-gradient(top, #89CDEF, #81BFDE); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#89CDEF), to(#81BFDE)); background-image: -webkit-linear-gradient(top, #89CDEF, #81BFDE); background-image: -o-linear-gradient(top, #89CDEF, #81BFDE); background-image: linear-gradient(to bottom, #89CDEF, #81BFDE); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#89CDEF', endColorstr='#81BFDE',GradientType=0); opacity: 1; }