如何使范圍滑塊上的“滑塊拇指”移出軌道

Question

我有一個垂直范圍滑塊，我希望“拇指”（您在滑塊上移動的東西）比軌道本身更寬（與 android 滑塊的外觀非常相似）。

我嘗試了很多東西，這是我設法做到的最接近的

到目前為止，這是我的代碼：

HTML

<div class="sliderContainer">
   <input type="range">
</div>

JS

$(window).on("load resize", function () {
   var sliderWidth = $('[type=range]').width();

   $('.custom-style-element-related-to-range').remove();

   $('<style class="custom-style-element-related-to-range">input[type="range"]::-webkit-slider-thumb { box-shadow: -' + sliderWidth + 'px 0 0 ' + sliderWidth + 'px;}<style/>').appendTo('head');
});

CSS

.sliderContainer {
    position: absolute;
    margin: 0 auto;
    left: -27px;
    top: 127px;
    width: 0px;
    height: 135px;
}

input[type='range'] {
    width: 120px;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
        overflow: hidden;
        -webkit-appearance: none;
        background-color: #D2CECC;
        transform: rotate(270deg);
    }
    input[type='range']::-webkit-slider-runnable-track {
        height: 3px;
        -webkit-appearance: none;
        color: #0098A6;
    }
    input[type='range']::-webkit-slider-thumb {
        width: 10px;
        -webkit-appearance: none;
        height: 10px;
        cursor: pointer;
        background: #434343;
        color: #0098A6;
        border: 10px #0098A6;
        border-radius: 50%;
        margin-top: -3px;
    }
}

input[type="range"]::-moz-range-progress {
    background-color: #0098A6;
}

input[type="range"]::-moz-range-track {
    background-color: #D2CECC;
}

input[type="range"]::-ms-fill-lower {
    background-color: #0098A6;
}

input[type="range"]::-ms-fill-upper {
    background-color: #D2CECC;
}

關於如何進步的任何想法都會很棒

編輯：

這就是我想要實現的目標：

我嘗試了更多的東西並設法使拇指在“外面”，但現在軌道不會改變顏色。

CSS

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
        -webkit-appearance: none;
        background-color: #D2CECC;
        transform: rotate(270deg);
    }
    input[type='range']::-webkit-slider-runnable-track {
        height: 3px;
        -webkit-appearance: none;
        color: #0098A6;
    }
    input[type='range']::-webkit-slider-thumb {
        width: 10px;
        -webkit-appearance: none;
        height: 10px;
        cursor: pointer;
        background: #0098A6;
        color: transparent;
        border: 10px #0098A6;
        border-radius: 50%;
        margin-top: -3px;
    }
}

Answer 1

我花了一些時間來解決這個問題，因為找到最佳解決方案很棘手。

overflow: hidden on input[type='range']可防止您的范圍拇指位於范圍滑塊的“外部”。

你可以使用box-shadow: -80px 0 0 80px #0098A6; 在input[type='range']::-webkit-slider-thumb上有一個 css 棘手的方式來顯示范圍背景顏色，但這也再次需要overflow: hidden在范圍軌道上，並且會再次阻止顯示您的范圍拇指外面（我已經在我的解決方案中評論了這部分）。

所以我設法用 JS/JQuery 解決方案解決了這個問題。 您還需要在 HTML 部分指定min和max屬性，以便在拖動范圍滑塊時讓 JS 讀取這些值。

您可以觀看我為此問題創建的 CodePen 並將部分復制到您的需要。 它還表明它有效：

https://codepen.io/alexiovay/pen/VwYMZpg

我盡可能地堅持你想要的設計結果。

Answer 2

我們都知道並喜歡僅使用 CSS 的解決方案。 然而，有時它並不是最好的解決方案！ 它通常可讀性較差，包含許多變通方法並且僅限於 CSS 的邊界。

我真的很喜歡@AlexioVay的方法和解決方案，但它有一個問題，即彩色部分只更新，如果你松開手柄，由於 CSS 限制，（編輯：現在修復），你可能會過得很糟糕根據您最深層次的需求進行定制。 既然您已經在使用 jQuery，為什么不直接使用 jQuery UI？

我認為這個解決方案是很多，很多更具可讀性和實用性。

 $(function() { $("#slider").slider({ orientation: "vertical", range: "min", value: 35, min: 0, max: 100 }); });

 #slider { background: #e6e6e6; border: 0; width: 3px; } #slider * { outline: none; } #slider .ui-slider-range, #slider .ui-slider-handle { background: #0098A6; border: 0; } #slider .ui-slider-handle { border-radius: 100%; width: 11px; height: 11px; margin-left: 1px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script> <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.min.css" rel="stylesheet"/> <div id="slider"></div>

易於閱讀的文檔和易於定制。 由於它不僅僅是一個默認的 HTML 滑塊，您可以為未來的事件偵聽器或自定義 CSS 單獨定位每個項目。 這樣它就不受 CSS 限制。

所以，是的，我的解決方案不是 CSS，但在我看來更好，更實用。