source: pro-violet-viettel/sourcecode/assets/css/less/thirdparty-slider.less

/** jQuery UI Slider */
.ui-slider {
 background-color:#CCC;
}
.ui-slider-horizontal {
  height:9px;
}
.ui-slider-vertical {
  width:9px;
}

.ui-slider .ui-slider-handle {
  border-radius:0;
  width: 1.45em; height: 1.45em;

  background-color:#F5F5F5;
  border:1px solid;

  &:before {
        display:inline-block;
        content:"|||";
        font-size:8px;
        font-family:Helvetica, Arial, sans-serif;       
        
        position:absolute; top:0; bottom:0; left:0; right:0;
        text-align:center; line-height:15px;
  }
  &:hover {
        background-color:#FFF;
  }
  &:hover , &:focus  , &:active{
        outline:none;
        box-shadow: 1px 1px 1px 0px rgba(0,0,0,.3);
        text-decoration:none;
        &:before {
                text-shadow: 1px 1px 1px rgba(0,0,0,.3);
        }
  }
}
.ui-slider-horizontal .ui-slider-handle {
    margin-left: -0.725em;
    top: -0.4em;
}
.ui-slider-vertical .ui-slider-handle {
        left: -0.35em;
        margin-bottom: -0.65em;
}

.ui-slider-small {
        &.ui-slider-horizontal {
                height:5px;
        }
        &.ui-slider-vertical {
                width:5px;
        }
        .ui-slider-handle {
                border-radius:24px;
                width:16px; height:16px;
                top:-5px;

                &:before {
                        font-size:6px;
                        line-height:13px;
                }
        }
}

/* colors */
.ui-slider-range {
        background-color:@slider-color;
}
.ui-slider-handle {
        outline:none !important;
        & , &:hover , &:focus, &:active {
                border-color:@slider-color;
                color:@slider-color;
        }
}



//slider color
.slider-color(@color) {
   @slider-class:~`"slider-@{color}"`;
   @slider-bg:@@slider-class;
   @slider-class2:~`"ui-@{slider-class}"`;

  .@{slider-class2} {
         .ui-slider-range {
                background-color:@slider-bg;
         }
         .ui-slider-handle {
                & , &:hover , &:focus, &:active {
                        border-color:@slider-bg;
                        color:@slider-bg;
                }
         }
  }
}
.slider-color(~"green");
.slider-color(~"red");
.slider-color(~"purple");
.slider-color(~"orange");
.slider-color(~"dark");
.slider-color(~"pink");