2

Есть input[type="range"]. Подскажите, как сделать ползунок такой, как на картинке с ядром внутри и орбитой снаружи (серый фон не в счет) желательно с помощью css? К сожалению, псевдоклассы здесь не применимы..

введите сюда описание изображения

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 7px;
  background-color: green;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid rgba(196, 196, 196, 0.4);
  height: 24px;
  width: 24px;
  border-radius: 50px;
  background: #fff;
  cursor: pointer;
}
<input type="range" name="range" min="100" max="1000" step="50" value="650">

1 ответ 1

1

Способ обычный, с использованием фонового изображения. Если необходимо то изображение можно преобразовать в base64 и вставить внутрь кода.

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-image: url(https://i.stack.imgur.com/r69Sx.png);
  background-repeat: no-repeat;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  background-position: center center;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  cursor: pointer;
 }

Способ еще проще, подбираем размеры толщины рамки, и добавляем тень для контейнера:

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  cursor: pointer;
  background: silver;
  border-radius: 100%;
  border: solid white 8px;
  cursor: pointer;
  box-shadow: 0 0 0 3px silver;
}
6
  • ну, если нет способа получше, типа векторной картинки или стиля, то ок, спасибо
    – Вася
    14 авг 2018 в 21:38
  • векторную картинку можно подгрузить так же как и обычную, нужно применить ее к background-image: url("icon.svg"); Поддержка движками в норме [caniuse.com/#feat=svg-css] 14 авг 2018 в 22:39
  • а откуда ее взять эту векторную картинку?
    – Вася
    15 авг 2018 в 6:49
  • 1
    либо создать в онлайн-редакторе новую в svg формате, либо же, конвертировать из существующей png картинки в svg 15 авг 2018 в 7:36
  • 1
    Такой вариант, можно реализовать с использованием небольшого скрипта, то есть реализовать аналог такого компонента(input[type=range]), вот мой пример, там можно масштабировать векторную окружность (codepen.io/Fedak/pen/PdYYMJ) 18 авг 2018 в 16:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.