Kieranmv95 Kieranmv95 - 1 year ago 61
HTML Question

Clip box-shadow to look like my example

I was wondering how I can replicate the image below

enter image description here
enter image description here
Currently mine looks like the image below

enter image description here

Is there a way I can clip the

box-shadow
to stay in the bars boundary or another way altogether to achieve this effect?

Here is my css for it:

.slider.slider-horizontal {
width: 100%;
}
.slider.slider-horizontal .slider-track {
height: 13px;
}
.slider.slider-horizontal .slider-track .slider-track-high {
background-color: grey;
background-image: none;
box-shadow: none;
border-radius: 20px;
}
.slider.slider-horizontal .slider-track .slider-handle {
background-color: blue;
background-image: none;
box-shadow: none;
margin-top: -4px;
}
.slider.slider-horizontal .slider-track .slider-selection {
border-radius: 20px;
background-image: none;
box-shadow: none;
background-color: blue;
}


Below is my markup:

<div class="slider slider-horizontal" id="">
<div class="slider-track">
<div class="slider-track-low"></div>
<div class="slider-selection"></div>
<div class="slider-track-high"></div>
<div class="slider-handle min-slider-handle round" role="slider" aria-valuemin="0" aria-valuemax="100000" aria-valuenow="3" tabindex="0"></div>
<div class="slider-handle max-slider-handle round hide" role="slider" aria-valuemin="0" aria-valuemax="100000" aria-valuenow="0" tabindex="0"></div>
</div>
</div>


Slider-handle is the part with the box shadow I am trying to achieve the effect on

Code bin of my current efforts

http://codepen.io/Kieranmv95/pen/ZWqBVP

Answer Source

Instead of putting it on slider-handle you can put the box-shadow on .slider-track-high class, like this-

$blueButton:                  #06aeff;
$grey:                        #B3B0BD;

.slider.slider-horizontal {
    width: 100%;
    .slider-track {
        height: 13px;
        .slider-track-high {
            background-color: $grey;
            background-image: none;
            box-shadow: -12px 0 0px #222;
            border-radius: 20px;
        }
        .slider-handle {
            background-color: $blueButton;
            background-image: none;
//            box-shadow: -2px 2px 0px black;
            margin-top: -4px;
        }
        .slider-selection {
            border-radius: 20px;
            background-image: none;
            box-shadow: none;
            background-color: $blueButton;
        }
    }
}