为什么我的范围滑块的工具提示显示不正确？

问题描述 投票：0回答：1

所以，在我的 Bootstrap 5 模式中，我有一个范围滑块。我向三个动态范围滑块添加了工具提示。添加它们后，工具提示溢出到右侧（显示不正确）。我试图使其处于绝对位置，但它不起作用。

我希望我的工具提示的行为与标准范围滑块工具提示类似。我尝试修复它，但由于它是动态的，这三个范围滑块工具提示显示每个范围滑块的另一右侧。

我的代码-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap');

.middle {
    position: relative;
    width: 100%;
    max-width: 500px;
}

.slider {
    position: relative;
    z-index: 1;
    height: var(--2, 8px);
}
.slider > .track {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 5px;
    background-color: #E5E7EB;
}
.slider > .range {
    position: absolute;
    z-index: 2;
    left: 25%;
    right: 25%;
    top: 0;
    bottom: 0;
    border-radius: 5px;
    background-color: #1C64F2;
}
.slider > .thumb {
    position: absolute;
    z-index: 3;
    width: 22px;
    height: 22px;
    background-color: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(98,0,238,.1);
    transition: box-shadow .3s ease-in-out;

    stroke-width: 1px;
    stroke: var(--gray-200, #E5E7EB);
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.08));
}
.slider > .thumb.left {
    left: 25%;
    transform: translate(-15px, -10px);
}
.slider > .thumb.right {
    right: 25%;
    transform: translate(15px, -10px);
}


input[type=range] {
    position: absolute;
    pointer-events: none;
    -webkit-appearance: none;
    z-index: 2;
    height: 10px;
    width: 100%;
    opacity: 0;
}
input[type=range]::-webkit-slider-thumb {
    pointer-events: all;
    width: 22px;
    height: 22px;
    border-radius: 0;
    border: 0 none;
    background-color: red;
    -webkit-appearance: none;
}
.tooltip {
    position: absolute;
    display: none;
    background-color: #1c64f2;
    color: #ffffff;
    padding: var(--05, 2px) var(--2, 8px);
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 1;
    top: -40px !important;
}



.modal-dialog {
    max-width: 720px;
    padding: 4px;
}


/* Max Result Start */
.max-result {
    margin-top: 16px;
}
.max-result label {
    color: #000;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    margin-bottom: 12px;
}

.max-result .form-control {
    box-shadow: none;
    background-color: #F9FAFB;
    border-color: #D1D5DB;
    border-radius: 8px;
}
.max-result .form-control::placeholder {
    color: #6B7280;
}

.price-range-section {
    border-bottom: 1px solid #E5E7EB;
    padding-bottom: 16px;
}
.price-range-section label:first-child {
    color: #000;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; 
    margin-bottom: 26px;
}
.modal-body .price-range-section:nth-child(2) {
    margin-top: 16px;
}
.modal-body-pad {
    padding-top: 4px;
    padding-bottom: 8px;
}


    </style>
</head>
<body>

    <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
    Launch static backdrop modal
  </button>
  
  <!-- Modal -->
  <div class="modal fade filter-modal" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header range-modal-header">
          <h1 class="modal-title fs-5" id="staticBackdropLabel">Filters</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body modal-body-pad">

            <ul class="nav nav-tabs">
                <li class="nav-item">
                  <a class="nav-link active" id="blockA-tab" data-bs-toggle="tab" href="#blockA">Basic</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" id="blockB-tab" data-bs-toggle="tab" href="#blockB">Advanced</a>
                </li>
              </ul>

              <div class="tab-content mt-2">
                <div class="tab-pane fade show active" id="blockA">
                  <div class="container">
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="price-range-section">
                                <label for="Price Range">Price Range</label>
                                <div class="middle">    
                                    <div class="multi-range-slider">
                                        <input type="range" id="price-min-slider" min="0" max="100" value="25">
                                        <input type="range" id="price-max-slider" min="0" max="100" value="75">
                                
                                        <div class="slider">
                                            <div class="track"></div>
                                            <div class="range"></div>
                                            <div class="thumb left"></div>
                                            <div class="thumb right"></div>
                                        </div>

                                         <!-- Tooltips -->
                                         <div class="tooltip" id="tooltip-left"></div>
                                         <div class="tooltip" id="tooltip-right"></div>
                                    </div>
                                </div>
                            </div>
                
                            <div class="price-range-section">
                                <label for="Delivery Range">Delivery Time (Days)</label>
                                <div class="middle">    
                                    <div class="multi-range-slider multi-range-slider2">
                                        <input type="range" id="min-delivery-slider" min="0" max="100" value="25">
                                        <input type="range" id="max-delivery-slider" min="0" max="100" value="75">

                                        <div class="slider">
                                            <div class="track"></div>
                                            <div class="range"></div>
                                            <div class="thumb left"></div>
                                            <div class="thumb right"></div>
                                        </div>

                                        <!-- Tooltips -->
                                        <div class="tooltip" id="tooltip-left2"></div>
                                        <div class="tooltip" id="tooltip-right2"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="price-range-section mt-3">
                                <label for="Bid Range">Bid Count</label>
                                <div class="middle">    
                                    <div class="multi-range-slider multi-range-slider3">
                                        <input type="range" id="min-bid-slider" min="0" max="100" value="25">
                                        <input type="range" id="max-bid-slider" min="0" max="100" value="75">

                                        <div class="slider">
                                            <div class="track"></div>
                                            <div class="range"></div>
                                            <div class="thumb left"></div>
                                            <div class="thumb right"></div>
                                        </div>

                                        <!-- Tooltips -->
                                        <div class="tooltip" id="tooltip-left3"></div>
                                        <div class="tooltip" id="tooltip-right3"></div>
                                    </div>
                                </div>
                            </div>
        
                        </div>
                        
            </div>
                    
            </div>
            </div>
                
        </div>
        </div>
        
      </div>
    </div>
  </div>


    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<script>
    //Range Price Slider Script Start / Price slider
    var PriceMinSlider = document.getElementById('price-min-slider');
      var PriceMaxSlider = document.getElementById('price-max-slider');

      var thumbLeft = document.querySelector('.slider > .thumb.left');
      var thumbRight = document.querySelector('.slider > .thumb.right');
      var range = document.querySelector('.slider > .range');

      var tooltipLeft = document.getElementById('tooltip-left');
      var tooltipRight = document.getElementById('tooltip-right');

      function setLeftValue() {
        var _this = PriceMinSlider,
          min = parseInt(_this.min),
          max = parseInt(_this.max);

        _this.value = Math.min(
          parseInt(_this.value),
          parseInt(PriceMaxSlider.value) - 1
        );

        var percent = ((_this.value - min) / (max - min)) * 100;

        thumbLeft.style.left = percent + '%';
        range.style.left = percent + '%';
        updateTooltipPosition();
      }

      setLeftValue();

      function setRightValue() {
        var _this = PriceMaxSlider,
          min = parseInt(_this.min),
          max = parseInt(_this.max);

        _this.value = Math.max(
          parseInt(_this.value),
          parseInt(PriceMinSlider.value) + 1
        );

        var percent = ((_this.value - min) / (max - min)) * 100;

        thumbRight.style.right = 100 - percent + '%';
        range.style.right = 100 - percent + '%';
        updateTooltipPosition();
      }

      setRightValue();

      function updateTooltipPosition() {
        var thumbLeftPosition = thumbLeft.getBoundingClientRect();
        var thumbRightPosition = thumbRight.getBoundingClientRect();

        tooltipLeft.style.display = 'block';
        tooltipLeft.style.left = thumbLeftPosition.left + 'px';
        tooltipLeft.style.top = thumbLeftPosition.bottom + 5 + 'px';
        tooltipLeft.innerHTML = PriceMinSlider.value;

        tooltipRight.style.display = 'block';
        tooltipRight.style.left = thumbRightPosition.left + 'px';
        tooltipRight.style.top = thumbRightPosition.bottom + 5 + 'px';
        tooltipRight.innerHTML = PriceMaxSlider.value;
      }
      PriceMinSlider.addEventListener('input', setLeftValue);
      PriceMaxSlider.addEventListener('input', setRightValue);

      PriceMinSlider.addEventListener('mousedown', function () {
        thumbLeft.classList.add('active');
      });

      PriceMinSlider.addEventListener('mouseup', function () {
        thumbLeft.classList.remove('active');
      });

      PriceMaxSlider.addEventListener('mousedown', function () {
        thumbRight.classList.add('active');
      });

      PriceMaxSlider.addEventListener('mouseup', function () {
        thumbRight.classList.remove('active');
      });
//Range Price Slider  Script End



// Range Delivery Slider Script
var MinDeliverySlider = document.getElementById('min-delivery-slider');
var MaxDeliverySlider = document.getElementById('max-delivery-slider');

var thumbLeft2 = document.querySelector('.multi-range-slider2 > .slider > .thumb.left');
var thumbRight2 = document.querySelector('.multi-range-slider2 > .slider > .thumb.right');
var range2 = document.querySelector('.multi-range-slider2 > .slider > .range');

var tooltipLeft2 = document.getElementById('tooltip-left2');
var tooltipRight2 = document.getElementById('tooltip-right2');

function setLeftValue2() {
    var _this = MinDeliverySlider,
        min = parseInt(_this.min),
        max = parseInt(_this.max);

    _this.value = Math.min(
        parseInt(_this.value),
        parseInt(MaxDeliverySlider.value) - 1
    );

    var percent = ((_this.value - min) / (max - min)) * 100;

    thumbLeft2.style.left = percent + '%';
    range2.style.left = percent + '%';
    updateTooltipPosition2();
}

setLeftValue2();

function setRightValue2() {
    var _this = MaxDeliverySlider,
        min = parseInt(_this.min),
        max = parseInt(_this.max);

    _this.value = Math.max(
        parseInt(_this.value),
        parseInt(MinDeliverySlider.value) + 1
    );

    var percent = ((_this.value - min) / (max - min)) * 100;

    thumbRight2.style.right = 100 - percent + '%';
    range2.style.right = 100 - percent + '%';
    updateTooltipPosition2();
}

setRightValue2();

function updateTooltipPosition2() {
    var thumbLeftPosition2 = thumbLeft2.getBoundingClientRect();
    var thumbRightPosition2 = thumbRight2.getBoundingClientRect();

    tooltipLeft2.style.display = 'block';
    tooltipLeft2.style.left = thumbLeftPosition2.left + 'px';
    tooltipLeft2.style.top = thumbLeftPosition2.bottom + 5 + 'px';
    tooltipLeft2.innerHTML = MinDeliverySlider.value;

    tooltipRight2.style.display = 'block';
    tooltipRight2.style.left = thumbRightPosition2.left + 'px';
    tooltipRight2.style.top = thumbRightPosition2.bottom + 5 + 'px';
    tooltipRight2.innerHTML = MaxDeliverySlider.value;
}

MinDeliverySlider.addEventListener('input', setLeftValue2);
MaxDeliverySlider.addEventListener('input', setRightValue2);

MinDeliverySlider.addEventListener('mousedown', function () {
    thumbLeft2.classList.add('active');
});

MinDeliverySlider.addEventListener('mouseup', function () {
    thumbLeft2.classList.remove('active');
});

MaxDeliverySlider.addEventListener('mousedown', function () {
    thumbRight2.classList.add('active');
});

MaxDeliverySlider.addEventListener('mouseup', function () {
    thumbRight2.classList.remove('active');
});


// Range Bid Slider Script
var MinBidSlider = document.getElementById('min-bid-slider');
var MaxBidSlider = document.getElementById('max-bid-slider');

var thumbLeft3 = document.querySelector('.multi-range-slider3 > .slider > .thumb.left');
var thumbRight3 = document.querySelector('.multi-range-slider3 > .slider > .thumb.right');
var range3 = document.querySelector('.multi-range-slider3 > .slider > .range');

var tooltipLeft3 = document.getElementById('tooltip-left3');
var tooltipRight3 = document.getElementById('tooltip-right3');

function setLeftValue3() {
    var _this = MinBidSlider,
        min = parseInt(_this.min),
        max = parseInt(_this.max);

    _this.value = Math.min(
        parseInt(_this.value),
        parseInt(MaxBidSlider.value) - 1
    );

    var percent = ((_this.value - min) / (max - min)) * 100;

    thumbLeft3.style.left = percent + '%';
    range3.style.left = percent + '%';
    updateTooltipPosition3();
}

setLeftValue3();

function setRightValue3() {
    var _this = MaxBidSlider,
        min = parseInt(_this.min),
        max = parseInt(_this.max);

    _this.value = Math.max(
        parseInt(_this.value),
        parseInt(MinBidSlider.value) + 1
    );

    var percent = ((_this.value - min) / (max - min)) * 100;

    thumbRight3.style.right = 100 - percent + '%';
    range3.style.right = 100 - percent + '%';
    updateTooltipPosition3();
}

setRightValue3();

function updateTooltipPosition3() {
    var thumbLeftPosition3 = thumbLeft3.getBoundingClientRect();
    var thumbRightPosition3 = thumbRight3.getBoundingClientRect();

    tooltipLeft3.style.display = 'block';
    tooltipLeft3.style.left = thumbLeftPosition3.left + 'px';
    tooltipLeft3.style.top = thumbLeftPosition3.bottom + 5 + 'px';
    tooltipLeft3.innerHTML = MinBidSlider.value;

    tooltipRight3.style.display = 'block';
    tooltipRight3.style.left = thumbRightPosition3.left + 'px';
    tooltipRight3.style.top = thumbRightPosition3.bottom + 5 + 'px';
    tooltipRight3.innerHTML = MaxBidSlider.value;
}

MinBidSlider.addEventListener('input', setLeftValue3);
MaxBidSlider.addEventListener('input', setRightValue3);

MinBidSlider.addEventListener('mousedown', function () {
    thumbLeft3.classList.add('active');
});

MinBidSlider.addEventListener('mouseup', function () {
    thumbLeft3.classList.remove('active');
});

MaxBidSlider.addEventListener('mousedown', function () {
    thumbRight3.classList.add('active');
});

MaxBidSlider.addEventListener('mouseup', function () {
    thumbRight3.classList.remove('active');
});


</script>
</body>
</html>
javascript html css tooltip rangeslider
1个回答
0
投票

.getBoundingClientRect()
的值相对于视口的左上角。当您通过 
.left
属性按原样将此调用的结果应用到工具提示时，它将相对于其最近的位置parent 。因此我们应该“撤销”这个偏移量。我们可以通过读取 
.offsetParent
属性，然后从其自己的 
.getBoundingClientRect()
获取其左上角视口相对值来获取它们各自的位置父级。从原始 
left
中减去 
.getBoundingClientRect()
将为我们提供一个相对值，该值将展示我相信您所追求的行为：

//Range Price Slider Script Start / Price slider
    var PriceMinSlider = document.getElementById('price-min-slider');
      var PriceMaxSlider = document.getElementById('price-max-slider');

      var thumbLeft = document.querySelector('.slider > .thumb.left');
      var thumbRight = document.querySelector('.slider > .thumb.right');
      var range = document.querySelector('.slider > .range');

      var tooltipLeft = document.getElementById('tooltip-left');
      var tooltipRight = document.getElementById('tooltip-right');

      function setLeftValue() {
        var _this = PriceMinSlider,
          min = parseInt(_this.min),
          max = parseInt(_this.max);

        _this.value = Math.min(
          parseInt(_this.value),
          parseInt(PriceMaxSlider.value) - 1
        );

        var percent = ((_this.value - min) / (max - min)) * 100;

        thumbLeft.style.left = percent + '%';
        range.style.left = percent + '%';
        updateTooltipPosition();
      }

      setLeftValue();

      function setRightValue() {
        var _this = PriceMaxSlider,
          min = parseInt(_this.min),
          max = parseInt(_this.max);

        _this.value = Math.max(
          parseInt(_this.value),
          parseInt(PriceMinSlider.value) + 1
        );

        var percent = ((_this.value - min) / (max - min)) * 100;

        thumbRight.style.right = 100 - percent + '%';
        range.style.right = 100 - percent + '%';
        updateTooltipPosition();
      }

      setRightValue();

      function updateTooltipPosition() {
        var thumbLeftPosition = thumbLeft.getBoundingClientRect();
        var thumbRightPosition = thumbRight.getBoundingClientRect();
        
        const leftOffset = tooltipLeft.offsetParent?.getBoundingClientRect().left || 0;
        tooltipLeft.style.display = 'block';
        tooltipLeft.style.left = thumbLeftPosition.left - leftOffset + 'px';
        tooltipLeft.style.top = thumbLeftPosition.bottom + 5 + 'px';
        tooltipLeft.innerHTML = PriceMinSlider.value;

        const rightOffset = tooltipLeft.offsetParent?.getBoundingClientRect().left || 0;
        tooltipRight.style.display = 'block';
        tooltipRight.style.left = thumbRightPosition.left - rightOffset + 'px';
        tooltipRight.style.top = thumbRightPosition.bottom + 5 + 'px';
        tooltipRight.innerHTML = PriceMaxSlider.value;
      }
      PriceMinSlider.addEventListener('input', setLeftValue);
      PriceMaxSlider.addEventListener('input', setRightValue);

      PriceMinSlider.addEventListener('mousedown', function () {
        thumbLeft.classList.add('active');
      });

      PriceMinSlider.addEventListener('mouseup', function () {
        thumbLeft.classList.remove('active');
      });

      PriceMaxSlider.addEventListener('mousedown', function () {
        thumbRight.classList.add('active');
      });

      PriceMaxSlider.addEventListener('mouseup', function () {
        thumbRight.classList.remove('active');
      });
//Range Price Slider  Script End



// Range Delivery Slider Script
var MinDeliverySlider = document.getElementById('min-delivery-slider');
var MaxDeliverySlider = document.getElementById('max-delivery-slider');

var thumbLeft2 = document.querySelector('.multi-range-slider2 > .slider > .thumb.left');
var thumbRight2 = document.querySelector('.multi-range-slider2 > .slider > .thumb.right');
var range2 = document.querySelector('.multi-range-slider2 > .slider > .range');

var tooltipLeft2 = document.getElementById('tooltip-left2');
var tooltipRight2 = document.getElementById('tooltip-right2');

function setLeftValue2() {
    var _this = MinDeliverySlider,
        min = parseInt(_this.min),
        max = parseInt(_this.max);

    _this.value = Math.min(
        parseInt(_this.value),
        parseInt(MaxDeliverySlider.value) - 1
    );

    var percent = ((_this.value - min) / (max - min)) * 100;

    thumbLeft2.style.left = percent + '%';
    range2.style.left = percent + '%';
    updateTooltipPosition2();
}

setLeftValue2();

function setRightValue2() {
    var _this = MaxDeliverySlider,
        min = parseInt(_this.min),
        max = parseInt(_this.max);

    _this.value = Math.max(
        parseInt(_this.value),
        parseInt(MinDeliverySlider.value) + 1
    );

    var percent = ((_this.value - min) / (max - min)) * 100;

    thumbRight2.style.right = 100 - percent + '%';
    range2.style.right = 100 - percent + '%';
    updateTooltipPosition2();
}

setRightValue2();

function updateTooltipPosition2() {
    var thumbLeftPosition2 = thumbLeft2.getBoundingClientRect();
    var thumbRightPosition2 = thumbRight2.getBoundingClientRect();

    const leftOffset = tooltipLeft2.offsetParent?.getBoundingClientRect().left || 0;
    tooltipLeft2.style.display = 'block';
    tooltipLeft2.style.left = thumbLeftPosition2.left - leftOffset + 'px';
    tooltipLeft2.style.top = thumbLeftPosition2.bottom + 5 + 'px';
    tooltipLeft2.innerHTML = MinDeliverySlider.value;

    const rightOffset = tooltipRight2.offsetParent?.getBoundingClientRect().left || 0;
    tooltipRight2.style.display = 'block';
    tooltipRight2.style.left = thumbRightPosition2.left - rightOffset + 'px';
    tooltipRight2.style.top = thumbRightPosition2.bottom + 5 + 'px';
    tooltipRight2.innerHTML = MaxDeliverySlider.value;
}

MinDeliverySlider.addEventListener('input', setLeftValue2);
MaxDeliverySlider.addEventListener('input', setRightValue2);

MinDeliverySlider.addEventListener('mousedown', function () {
    thumbLeft2.classList.add('active');
});

MinDeliverySlider.addEventListener('mouseup', function () {
    thumbLeft2.classList.remove('active');
});

MaxDeliverySlider.addEventListener('mousedown', function () {
    thumbRight2.classList.add('active');
});

MaxDeliverySlider.addEventListener('mouseup', function () {
    thumbRight2.classList.remove('active');
});


// Range Bid Slider Script
var MinBidSlider = document.getElementById('min-bid-slider');
var MaxBidSlider = document.getElementById('max-bid-slider');

var thumbLeft3 = document.querySelector('.multi-range-slider3 > .slider > .thumb.left');
var thumbRight3 = document.querySelector('.multi-range-slider3 > .slider > .thumb.right');
var range3 = document.querySelector('.multi-range-slider3 > .slider > .range');

var tooltipLeft3 = document.getElementById('tooltip-left3');
var tooltipRight3 = document.getElementById('tooltip-right3');

function setLeftValue3() {
    var _this = MinBidSlider,
        min = parseInt(_this.min),
        max = parseInt(_this.max);

    _this.value = Math.min(
        parseInt(_this.value),
        parseInt(MaxBidSlider.value) - 1
    );

    var percent = ((_this.value - min) / (max - min)) * 100;

    thumbLeft3.style.left = percent + '%';
    range3.style.left = percent + '%';
    updateTooltipPosition3();
}

setLeftValue3();

function setRightValue3() {
    var _this = MaxBidSlider,
        min = parseInt(_this.min),
        max = parseInt(_this.max);

    _this.value = Math.max(
        parseInt(_this.value),
        parseInt(MinBidSlider.value) + 1
    );

    var percent = ((_this.value - min) / (max - min)) * 100;

    thumbRight3.style.right = 100 - percent + '%';
    range3.style.right = 100 - percent + '%';
    updateTooltipPosition3();
}

setRightValue3();

function updateTooltipPosition3() {
    var thumbLeftPosition3 = thumbLeft3.getBoundingClientRect();
    var thumbRightPosition3 = thumbRight3.getBoundingClientRect();

    const leftOffset = tooltipLeft3.offsetParent?.getBoundingClientRect().left || 0;
    tooltipLeft3.style.display = 'block';
    tooltipLeft3.style.left = thumbLeftPosition3.left - leftOffset + 'px';
    tooltipLeft3.style.top = thumbLeftPosition3.bottom + 5 + 'px';
    tooltipLeft3.innerHTML = MinBidSlider.value;

    const rightOffset = tooltipLeft3.offsetParent?.getBoundingClientRect().left || 0;
    tooltipRight3.style.display = 'block';
    tooltipRight3.style.left = thumbRightPosition3.left - rightOffset + 'px';
    tooltipRight3.style.top = thumbRightPosition3.bottom + 5 + 'px';
    tooltipRight3.innerHTML = MaxBidSlider.value;
}

MinBidSlider.addEventListener('input', setLeftValue3);
MaxBidSlider.addEventListener('input', setRightValue3);

MinBidSlider.addEventListener('mousedown', function () {
    thumbLeft3.classList.add('active');
});

MinBidSlider.addEventListener('mouseup', function () {
    thumbLeft3.classList.remove('active');
});

MaxBidSlider.addEventListener('mousedown', function () {
    thumbRight3.classList.add('active');
});

MaxBidSlider.addEventListener('mouseup', function () {
    thumbRight3.classList.remove('active');
});
@import url('https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css');
@import url('https://unpkg.com/[email protected]/css/boxicons.min.css');

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap');

.middle {
    position: relative;
    width: 100%;
    max-width: 500px;
}

.slider {
    position: relative;
    z-index: 1;
    height: var(--2, 8px);
}
.slider > .track {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 5px;
    background-color: #E5E7EB;
}
.slider > .range {
    position: absolute;
    z-index: 2;
    left: 25%;
    right: 25%;
    top: 0;
    bottom: 0;
    border-radius: 5px;
    background-color: #1C64F2;
}
.slider > .thumb {
    position: absolute;
    z-index: 3;
    width: 22px;
    height: 22px;
    background-color: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(98,0,238,.1);
    transition: box-shadow .3s ease-in-out;

    stroke-width: 1px;
    stroke: var(--gray-200, #E5E7EB);
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.08));
}
.slider > .thumb.left {
    left: 25%;
    transform: translate(-15px, -10px);
}
.slider > .thumb.right {
    right: 25%;
    transform: translate(15px, -10px);
}


input[type=range] {
    position: absolute;
    pointer-events: none;
    -webkit-appearance: none;
    z-index: 2;
    height: 10px;
    width: 100%;
    opacity: 0;
}
input[type=range]::-webkit-slider-thumb {
    pointer-events: all;
    width: 22px;
    height: 22px;
    border-radius: 0;
    border: 0 none;
    background-color: red;
    -webkit-appearance: none;
}
.tooltip {
    position: absolute;
    display: none;
    background-color: #1c64f2;
    color: #ffffff;
    padding: var(--05, 2px) var(--2, 8px);
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 1;
    top: -40px !important;
}



.modal-dialog {
    max-width: 720px;
    padding: 4px;
}


/* Max Result Start */
.max-result {
    margin-top: 16px;
}
.max-result label {
    color: #000;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    margin-bottom: 12px;
}

.max-result .form-control {
    box-shadow: none;
    background-color: #F9FAFB;
    border-color: #D1D5DB;
    border-radius: 8px;
}
.max-result .form-control::placeholder {
    color: #6B7280;
}

.price-range-section {
    border-bottom: 1px solid #E5E7EB;
    padding-bottom: 16px;
}
.price-range-section label:first-child {
    color: #000;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; 
    margin-bottom: 26px;
}
.modal-body .price-range-section:nth-child(2) {
    margin-top: 16px;
}
.modal-body-pad {
    padding-top: 4px;
    padding-bottom: 8px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
    Launch static backdrop modal
  </button>
  
  <!-- Modal -->
  <div class="modal fade filter-modal" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header range-modal-header">
          <h1 class="modal-title fs-5" id="staticBackdropLabel">Filters</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body modal-body-pad">

            <ul class="nav nav-tabs">
                <li class="nav-item">
                  <a class="nav-link active" id="blockA-tab" data-bs-toggle="tab" href="#blockA">Basic</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" id="blockB-tab" data-bs-toggle="tab" href="#blockB">Advanced</a>
                </li>
              </ul>

              <div class="tab-content mt-2">
                <div class="tab-pane fade show active" id="blockA">
                  <div class="container">
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="price-range-section">
                                <label for="Price Range">Price Range</label>
                                <div class="middle">    
                                    <div class="multi-range-slider">
                                        <input type="range" id="price-min-slider" min="0" max="100" value="25">
                                        <input type="range" id="price-max-slider" min="0" max="100" value="75">
                                
                                        <div class="slider">
                                            <div class="track"></div>
                                            <div class="range"></div>
                                            <div class="thumb left"></div>
                                            <div class="thumb right"></div>
                                        </div>

                                         <!-- Tooltips -->
                                         <div class="tooltip" id="tooltip-left"></div>
                                         <div class="tooltip" id="tooltip-right"></div>
                                    </div>
                                </div>
                            </div>
                
                            <div class="price-range-section">
                                <label for="Delivery Range">Delivery Time (Days)</label>
                                <div class="middle">    
                                    <div class="multi-range-slider multi-range-slider2">
                                        <input type="range" id="min-delivery-slider" min="0" max="100" value="25">
                                        <input type="range" id="max-delivery-slider" min="0" max="100" value="75">

                                        <div class="slider">
                                            <div class="track"></div>
                                            <div class="range"></div>
                                            <div class="thumb left"></div>
                                            <div class="thumb right"></div>
                                        </div>

                                        <!-- Tooltips -->
                                        <div class="tooltip" id="tooltip-left2"></div>
                                        <div class="tooltip" id="tooltip-right2"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="price-range-section mt-3">
                                <label for="Bid Range">Bid Count</label>
                                <div class="middle">    
                                    <div class="multi-range-slider multi-range-slider3">
                                        <input type="range" id="min-bid-slider" min="0" max="100" value="25">
                                        <input type="range" id="max-bid-slider" min="0" max="100" value="75">

                                        <div class="slider">
                                            <div class="track"></div>
                                            <div class="range"></div>
                                            <div class="thumb left"></div>
                                            <div class="thumb right"></div>
                                        </div>

                                        <!-- Tooltips -->
                                        <div class="tooltip" id="tooltip-left3"></div>
                                        <div class="tooltip" id="tooltip-right3"></div>
                                    </div>
                                </div>
                            </div>
        
                        </div>
                        
            </div>
                    
            </div>
            </div>
                
        </div>
        </div>
        
      </div>
    </div>
  </div>


    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    
</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.