CODEWITHSUNDEEP
htmlcssbox-shadow
Kieranmv95
Kieranmv95

Reputation: 828

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

Upvotes: 2

Views: 138

Answers (1)

Himanshu Aggarwal
Himanshu Aggarwal

Reputation: 1100

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;
        }
    }
}

Upvotes: 1

Related Questions