下のバックグラウンドイメージへのスライドが圧縮されるときの垂直スライダ

Question

jquery-uiプラグインを使用して垂直スライダ機能を実現しました。グラデーション効果を実現したいので、背景画像を使用し、bg/rangeとスライドハンドルを含めます。問題は、ドットハンドルを下にスライドすると、bgイメージが圧縮されたときです。ここに私のコード例があります。

jsFiddle

#head_slider .ui-slider-range { 
    background: url(https://image.ibb.co/hTvN6a/head_slider_h.png) 0px center no-repeat; 
} 

#head_slider_bg { 
    position: absolute; 
    width: 72px; 
    height: 704px; 
    right: 100px; 
    background: url(https://image.ibb.co/mUfpma/head_slider_n.png) center center no-repeat; 
} 

と横のスライダーに同じ方法で結構です！それは私を混乱させる。あなたの読書と助けてくれてありがとう。

Answer 1

問題はバックグラウンドイメージが圧縮されているのではなく、バーチクルバーに適用されたCSSルールborder-radiusが異なることです。スライダを下にスライドさせると、バーチクルバーの高さが60px（ボーダ半径に設定した値）より小さくなり、実際のボーダ半径が減少します。

この問題を解決するには、その要素にmin-heightという制約を追加します。これは、更新されたfiddle（CSSのLine 79でmin-height: 60pxを追加）を参照することができます。

ブラウザハンドルborder-radiusの動作の詳細については、Cornor Overlapの仕様のセクションを参照してください。