クリップボックスシャドウは、方法はあり現在鉱山が</p> <p><a href="https://i.stack.imgur.com/xDug1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xDug1.png" alt="enter image description here"></a></p> <p>下の画像のように見える

Question

は私が

下の画像を複製することができますどのように思っていた私の例のように見えるように私はbox-shadowをクリップして、バーの境界や別の方法でこの効果を達成することができますか？ここで

はそれのための私のCSSです：

以下

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

は私のマークアップです：

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

スライダーハンドルは、私が

上の効果を達成しようとしていますボックスシャドウと一部であり、

私の現在の努力のコードビン

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

Answer 1

代わりにそれを置くことで、あなたは同様にあなたのマークアップを投稿することができます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; 
     } 
    } 
}