Slider CSS fix
height: 5px;
position: relative;
background: #ddd;
border-radius: 5px;
}
.slider .progress {
height: 100%;
left: 25%;
right: 25%;
position: absolute;
border-radius: 5px;
background: #17a2b8;
}
.range-input {
position: relative;
}
.range-input input {
position: absolute;
width: 100%;
height: 5px;
top: -5px;
background: none;
pointer-events: none;
-webkit-appearance: none;
-moz-appearance: none;
}
input[type="range"]::-webkit-slider-thumb {
height: 17px;
width: 17px;
border-radius: 50%;
background: #17a2b8;
pointer-events: auto;
-webkit-appearance: none;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}
input[type="range"]::-moz-range-thumb {
height: 17px;
width: 17px;
border: none;
border-radius: 50%;
background: #17a2b8;
pointer-events: auto;
-moz-appearance: none;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}
above price slider css but both circle showing below the slider line not in middle
also background color not filled fully between min and max
Here’s a corrected CSS version that centers the thumbs on the line and makes the background fill correctly between min and max:
.slider {
height: 5px;
position: relative;
background: #ddd;
border-radius: 5px;
}
.slider .progress {
height: 100%;
position: absolute;
border-radius: 5px;
background: #17a2b8;
/* these should be controlled dynamically in JS */
left: 25%;
right: 25%;
}
.range-input {
position: relative;
}
.range-input input {
position: absolute;
width: 100%;
height: 5px; /* match slider height */
top: 0; /* align with track */
background: none;
pointer-events: none;
-webkit-appearance: none;
-moz-appearance: none;
}
/* Chrome/Safari */
input[type="range"]::-webkit-slider-thumb {
height: 17px;
width: 17px;
border-radius: 50%;
background: #17a2b8;
pointer-events: auto;
-webkit-appearance: none;
margin-top: -6px; /* center the circle on the line */
box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}
/* Firefox */
input[type="range"]::-moz-range-thumb {
height: 17px;
width: 17px;
border: none;
border-radius: 50%;
background: #17a2b8;
pointer-events: auto;
-moz-appearance: none;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}
/* Remove default track so only .slider shows */
input[type="range"]::-webkit-slider-runnable-track {
height: 5px;
background: transparent;
}
input[type="range"]::-moz-range-track {
height: 5px;
background: transparent;
}### Fixes explained:
1. `margin-top: -6px;` → shifts the thumb up so it sits **centered** on the line (because 17px thumb vs 5px line needs ~6px offset).
2. Removed `top: -5px;` from inputs (that pushed them below).
3. Background fill (`.progress`) should be set dynamically via JS — update its `left` and `right` values whenever the min/max handles move.
—
👉 Do you want me to also give you a small **JS snippet** to update `.progress` width dynamically between the two slider handles so the fill color adjusts automatically?
priceInput = document.querySelectorAll(".price-input input"),
range = document.querySelector(".slider .progress");
let priceGap = 1.0;
priceInput.forEach((input) => {
input.addEventListener("input", (e) => {
let minPrice = parseFloat(priceInput[0].value),
maxPrice = parseFloat(priceInput[1].value),
minLimit = parseFloat(rangeInput[0].min),
maxLimit = parseFloat(rangeInput[1].max);
if (maxPrice – minPrice >= priceGap && maxPrice = minLimit) {
if (e.target.classList.contains("input-min")) {
rangeInput[0].value = minPrice;
range.style.left = ((minPrice – minLimit) / (maxLimit – minLimit)) * 100 + "%";
} else {
rangeInput[1].value = maxPrice;
range.style.right = 100 – ((maxPrice – minLimit) / (maxLimit – minLimit)) * 100 + "%";
}
}
});
});
rangeInput.forEach((input) => {
input.addEventListener("input", (e) => {
let minVal = parseFloat(rangeInput[0].value),
maxVal = parseFloat(rangeInput[1].value),
minLimit = parseFloat(rangeInput[0].min),
maxLimit = parseFloat(rangeInput[1].max);
if (maxVal – minVal < priceGap) {
if (e.target.classList.contains("range-min")) {
rangeInput[0].value = (maxVal – priceGap).toFixed(1);
} else {
rangeInput[1].value = (minVal + priceGap).toFixed(1);
}
} else {
priceInput[0].value = minVal.toFixed(1);
priceInput[1].value = maxVal.toFixed(1);
range.style.left = ((minVal – minLimit) / (maxLimit – minLimit)) * 100 + "%";
range.style.right = 100 – ((maxVal – minLimit) / (maxLimit – minLimit)) * 100 + "%";
}
});
});
above is the js
### 1) CSS: center the thumbs on the 5px track
.slider {
height: 5px;
position: relative;
background: #ddd;
border-radius: 5px;
}
.slider .progress {
position: absolute;
height: 100%;
border-radius: 5px;
background: #17a2b8;
left: 25%; /* JS will overwrite these */
right: 25%;
}
/* Keep the range inputs aligned with the track */
.range-input { position: relative; }
.range-input input {
position: absolute;
width: 100%;
height: 5px; /* same as .slider height */
top: 0; /* align to the track */
background: none;
pointer-events: none; /* let only the thumbs be interactive */
-webkit-appearance: none;
-moz-appearance: none;
}
/* WebKit (Chrome/Safari) */
input[type="range"]::-webkit-slider-thumb {
height: 17px;
width: 17px;
border-radius: 50%;
background: #17a2b8;
pointer-events: auto; /* thumbs stay interactive */
-webkit-appearance: none;
margin-top: -6px; /* center 17px thumb on 5px track ( (17-5)/2 ) */
box-shadow: 0 0 6px rgba(0,0,0,.05);
}
input[type="range"]::-webkit-slider-runnable-track {
height: 5px;
background: transparent; /* we’re drawing the track ourselves */
}
/* Firefox */
input[type="range"]::-moz-range-thumb {
height: 17px;
width: 17px;
border-radius: 50%;
border: none;
background: #17a2b8;
pointer-events: auto;
box-shadow: 0 0 6px rgba(0,0,0,.05);
}
input[type="range"]::-moz-range-track {
height: 5px;
background: transparent;
}
/* Avoid the “stuck under” issue when thumbs overlap */
.range-input input.range-min { z-index: 3; }
.range-input input.range-max { z-index: 2; }### 2) JS: minor fixes + initialize the progress on load
– Clamp values to `min`/`max`.
– Keep one source of truth for limits.
– Initialize the `.progress` on startup so it’s filled correctly before any input.
const rangeInput = document.querySelectorAll(".range-input input");
const priceInput = document.querySelectorAll(".price-input input");
const range = document.querySelector(".slider .progress");
const minLimit = parseFloat(rangeInput[0].min || 0);
const maxLimit = parseFloat(rangeInput[1].max || 100);
const priceGap = 1.0;
function pct(val) {
return ((val - minLimit) / (maxLimit - minLimit)) * 100;
}
function updateProgress(minVal, maxVal) {
range.style.left = pct(minVal) + "%";
range.style.right = (100 - pct(maxVal)) + "%";
}
function clamp(val, min, max) {
return Math.min(Math.max(val, min), max);
}
// Price inputs → update ranges
priceInput.forEach((input) => {
input.addEventListener("input", (e) => {
let minPrice = parseFloat(priceInput[0].value);
let maxPrice = parseFloat(priceInput[1].value);
if (Number.isNaN(minPrice)) minPrice = minLimit;
if (Number.isNaN(maxPrice)) maxPrice = maxLimit;
minPrice = clamp(minPrice, minLimit, maxLimit);
maxPrice = clamp(maxPrice, minLimit, maxLimit);
if (maxPrice - minPrice < priceGap) {
if (e.target.classList.contains("input-min")) {
minPrice = maxPrice - priceGap;
} else {
maxPrice = minPrice + priceGap;
}
minPrice = clamp(minPrice, minLimit, maxLimit);
maxPrice = clamp(maxPrice, minLimit, maxLimit);
}
rangeInput[0].value = minPrice;
rangeInput[1].value = maxPrice;
priceInput[0].value = minPrice.toFixed(1);
priceInput[1].value = maxPrice.toFixed(1);
updateProgress(minPrice, maxPrice);
});
});
// Range inputs → update prices
rangeInput.forEach((inputEl) => {
inputEl.addEventListener("input", (e) => {
let minVal = parseFloat(rangeInput[0].value);
let maxVal = parseFloat(rangeInput[1].value);
minVal = clamp(minVal, minLimit, maxLimit);
maxVal = clamp(maxVal, minLimit, maxLimit);
if (maxVal - minVal < priceGap) {
if (e.target.classList.contains("range-min")) {
minVal = clamp(maxVal - priceGap, minLimit, maxLimit);
rangeInput[0].value = minVal.toFixed(1);
} else {
maxVal = clamp(minVal + priceGap, minLimit, maxLimit);
rangeInput[1].value = maxVal.toFixed(1);
}
}
priceInput[0].value = parseFloat(rangeInput[0].value).toFixed(1);
priceInput[1].value = parseFloat(rangeInput[1].value).toFixed(1);
updateProgress(parseFloat(rangeInput[0].value), parseFloat(rangeInput[1].value));
});
});
// Initialize on page load (so the fill is correct immediately)
(function init() {
const minVal = clamp(parseFloat(rangeInput[0].value) || minLimit, minLimit, maxLimit);
const maxVal = clamp(parseFloat(rangeInput[1].value) || maxLimit, minLimit, maxLimit);
rangeInput[0].value = minVal;
rangeInput[1].value = maxVal;
priceInput[0].value = minVal.toFixed(1);
priceInput[1].value = maxVal.toFixed(1);
updateProgress(minVal, maxVal);
})();**Why this fixes your issues**
– The thumbs were “below” because the input was shifted (`top: -5px`) and the thumbs had no vertical correction. Setting `top: 0` + `margin-top: -6px` centers the 17px thumb on the 5px track.
– The fill wasn’t complete because the initial `.progress` wasn’t updated on load. `init()` + `updateProgress()` fix that, and subsequent changes keep `left`/`right` in sync with the two handles.
If you want, share your minimal HTML wrapper and I’ll sanity‑check class names and structure too.