Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.83/6: Рейтинг темы: голосов - 6, средняя оценка - 4.83
1 / 1 / 0
Регистрация: 03.03.2019
Сообщений: 234
1

Двухцветный ползунок

28.12.2020, 00:51. Показов 1139. Ответов 2
Метки нет (Все метки)

Здраствуйте, как можно сделать ползонок похожый на етот, имею ввиду где половина слайдера которая до его значения не прозрачная, остальная прозрачная
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Миниатюры
Двухцветный ползунок  
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
28.12.2020, 00:51
Ответы с готовыми решениями:

Двухцветный фон со скосом
Помогите, научите, как сделать вот такую - казалось бы - простую вещицу.

Как правильно сделать горизонтальный двухцветный фон?
В общем, дело такое: На всю длину страницы идет PNG-фон, но из-за своих особенностей он...

Ползунок
Всем привет! как сделать чтобы при перетаскивании ползунка до конца влево или вправо, сам ползунок...

Ползунок стилизация
Подскажите как можно сделать такую стрелку у ползунка?

2
1 / 1 / 0
Регистрация: 03.03.2019
Сообщений: 234
28.12.2020, 00:55  [ТС] 2
Етот код создает просто белый слайдер
HTML5
1
<input type="range" min="0" max="100" value="50" id="slider">
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#slider {
        
    margin: 0;
    appearance: none;
    width: 100%;
    height: 1vmin;
    border-radius: 1vmin;
    background: white;
    outline: none;
   
}
#slider::-webkit-slider-thumb {
    appearance: none;
    width: 2vmin;
    height: 2vmin;
    border-radius: 50%;
    background: white;
    cursor: pointer;
}
0
Изображения
 
Эксперт JS
1355 / 661 / 298
Регистрация: 01.02.2019
Сообщений: 912
28.12.2020, 07:15 3
Лучший ответ Сообщение было отмечено Vektoralgor как решение

Решение

Vektoralgor, есть много вариантов с js, вот даже коллекция.
На чистом css получилось создать только такое
HTML5
1
<input type="range" min="0" max="100" value="50" id="slider">
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
body {
  background: #674847;
}
 
#slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 15px;
  background-color: #504545;
  outline: none;
  overflow: hidden;
}
 
#slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  cursor: pointer;
  background: white;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .3);
  box-shadow: -99999px 0 0 99993px white;
}
3
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
28.12.2020, 07:15

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Ползунок выбора диапазона
Делаю ползунов выбора диапазона цен на основе JQuery UI Slider . Не получается сделать чтобы...

Ползунок для списка
У меня есть список, как сделать так чтоб был ползунок с помощью которого список будет прокручиватся?

Убрать ползунок прокрутки
Выставил сверху полосу 3px и сейчас появляется полоса прокрутки, как её убрать ? Если не выставлять...

Ползунок регулировки размера элемента div
Добрый день! Имеется два элемента div. Они располагаются друг за другом (вертикально). Можно ли...

Ползунок браузера влияет на центрующий блок
Меню в шапке отцентровано с помощью центрующего блока (margin: 0 auto 0 auto) так вот ползунок в...

Внизу появляется ползунок. Что делать?
Почему так? Я обнулил *, создал контейнер главный, далее указываю высоту 100% и ширину...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.