Как сделать полузунок с отсупами по краям

Question

.weather__box__card-progressbar {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: rgba(218, 218, 218, 0.4);
    outline: none;
    border-radius: 10px;
}

.weather__box__card-progressbar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    background: rgb(245, 244, 244);
    cursor: pointer;
}

вот мой код

Answer 1

body {
  background: gray;
}

.weather__box__card-progressbar {
  -webkit-appearance: none;
  width: 100%;
  height: 20px;
  background: lightgray;
  outline: none;
  border-radius: 10px;
}

.weather__box__card-progressbar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  border: 5px solid gray;
  background: white;
  cursor: pointer;
}

<form action="#" method="post">
  <label for="range"></label>
  <input type="range" id="range" min="0" max="100" class="weather__box__card-progressbar">
</form>

немного костыльный вариант, но все же

Answer 2

Если предполагается неоднородный фон и прозрачность ползунка, то можете воспользоваться следующим решением:

body { background: 0 0 / cover url('https://i.stack.imgur.com/8ID7l.jpg'); }

.weather__box__card-progressbar {
  -webkit-appearance: none;
  width: 100%;
  border-radius: 100vw;
  outline: none;
  overflow: hidden;
  background-color: #0000;
}

.weather__box__card-progressbar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 52px;
  aspect-ratio: 1;
  border-style: solid;
  border-width: 10px; /* размер отступа от thumb */
  border-color: #0000; /* цвет отступа от thumb */
  border-radius: 50%;
  background-color: #fa0a; /* цвет thumb */
  background-clip: padding-box;
  box-shadow:
    /* 100vw + width / 2 */
    calc(100vw + 26px) 0 0 100vw #f00a, /* цвет справа от thumb */
    0 0 0 100vw #090a; /* цвет слева от thumb */
  cursor: pointer;
}

<form action="#" method="post">
  <label for="range"></label>
  <input type="range" id="range" min="0" max="100" class="weather__box__card-progressbar">
</form>

БЛОГ НА HUSL

Как сделать полузунок с отсупами по краям

Ответы (2 шт):