.slider { position: relative; height: 18px; &.single-slider { padding-top: 7px; .track { @track-height: 4px; height: @track-height; border: @track-height / 2 solid @border-regular-control-ie; border: @track-height / 2 solid @border-regular-control; border-radius: @track-height / 2; width: calc(100% + @track-height); margin-left: -@track-height / 2; } .thumb { @thumb-width: 12px; width: @thumb-width; height: @thumb-width; border: @scaled-one-px-value-ie solid @icon-normal-ie; border: @scaled-one-px-value solid @icon-normal; background-color: @background-normal-ie; background-color: @background-normal; border-radius: @thumb-width / 2; top: 3px; margin-left: @thumb-width / -2; &.active { } } } .thumb { position: absolute; left: 0; margin-left: -7px; cursor: default; &.active { } } .track { height: 18px; background-color: transparent; div { width: 7px; height: 18px; display: inline-block; } } &.disabled { opacity: @component-disabled-opacity; } }