再考されたタイトル: ボックス シャドウにのみオーバーフロー エフェクトを適用する方法

Question

入力範囲スライダー バーを作成しようとしていますが、問題が発生しました。

body {
    コンテンツの位置揃え: 中央;
    整列項目: 中央;
    最小高さ: 100vh;
    背景: #151515;
}
#rangeValue {
    位置: 相対的;
    表示ブロック;
    フォントサイズ: 6em;
    色: #999;
    フォントの太さ: 400;
}
。範囲 {
    背景: 線形グラデーション(-45度、#ee7752、#e73c7e、#23a6d5、#23d5ab) !重要;
    幅: 400ピクセル;
    高さ: 5px;
    -webkit の外観: なし。
    背景: #111;
    概要: なし。
    境界半径: 15px;
    ボックスシャドウ: インセット 0 0 5px rgba(0, 0, 0, 1);
}
.range::-webkit-slider-thumb {
    -webkit の外観: なし。
    幅: 15px;
    高さ: 15px;
    境界半径: 50%;
    背景: 青;
    カーソル: ポインタ;
    ボックスシャドウ: -507px 0 0 500px 赤;
}

<div>
    <span id="rangeValue">0</span>
    <Input class="range" type="range" name "" value="0" min="0" max="1000"></Input>
</div>

問題は、この大きな赤い領域を描画時に入力スライダー内に残しておきたいということです。唯一の解決策は、overflow: hidden を .range に適用することですが、青い点ボタンが失われます。 overflow:hidden を box-shadow に適用する方法はありますか?それともそれを機能させるための他の方法に関する手がかりはありますか？

最終結果は次のようになります =>

ありがとうございます。

Answer 1

これが役立つかどうかはわかりませんが、私が行ったリファクタリングは次のとおりです。タスクに合わせていくつかの変更を加えることができるかもしれません。

HTML

リーリー

CSSS

リーリー

JS

リーリー

お好みに合わせて調整できます。 お役に立てれば。