.slider-price {
    position: relative;
    margin-top: 20px;
}

.minrange {
    position: absolute;
    right: 0px;
    width: 50%;
    border-top-right-radius: 35px;
    border-bottom-right-radius: 35px;
    /* direction: ltr; */
}

.maxrange {
    position: absolute;
    left: 0px;
    width: 50%;
    border-top-left-radius: 35px;
    border-bottom-left-radius: 35px;
}

.slider-price .text {
    padding-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.slider-price .text span {
    font-size: 14px;
    color: gray;
}

.slider-price .text span b {
    font-size: 16px;
    font-weight: 900;
    color: #000;
    margin-right: 2px;
    margin-left: 2px;
}


/* استایل به قسمت اسلایدر (رنج) */

input[type="range"] {
    -webkit-appearance: none;
    /* برای استفاده از ظاهر استاندارد */
    /* width: 100%;
    height: 12px; */
    /* ارتفاع نوار */
    background: #ddd;
    /* رنگ پیش‌فرض پس‌زمینه */
    outline: none;
    height: 5px;
    /* انیمیشن برای تغییر رنگ */
}


/* استایل نوار پیشرفت (filled part) */

input[type="range"]::-webkit-slider-runnable-track {
    height: 12px;
    background: transparent;
    /* نوار پیشرفت باید شفاف باشد تا فقط رنگ گرید مشاهده شود */
    border-radius: 5px;
}

input[type="range"]::-moz-range-track {
    height: 12px;
    background: transparent;
    /* نوار پیشرفت باید شفاف باشد */
    border-radius: 5px;
}

input[type="range"]::-ms-track {
    height: 12px;
    background: transparent;
    /* نوار پیشرفت باید شفاف باشد */
    border-radius: 5px;
    border-color: transparent;
    color: transparent;
}


/* استایل برای گوی‌ها (thumbs) */

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #008060;
    /* رنگ قرمز گوی‌ها */
    border-radius: 50%;
    /* گرد کردن گوی‌ها */
    cursor: pointer;
    border: none;
    /* حذف border */
    transition: background 0.3s ease;
    /* تغییر رنگ هنگام hover */
    margin-top: -4px;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #008060;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    /* حذف border */
    transition: background 0.3s ease;
}

input[type="range"]::-ms-thumb {
    width: 20px;
    height: 20px;
    background: #008060;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    /* حذف border */
    transition: background 0.3s ease;
}


/* تغییر رنگ گوی هنگام hover */

input[type="range"]:hover::-webkit-slider-thumb {
    background: dark#008060;
}


/* استایل برای مقدار گوی */

.values {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    font-size: 16px;
}