Ползунок html + CSS

Здравствуйте уважаемые начинающие веб-мастера. Ещё один Оригинальный эффект CSS.

Сейчас будем делать красивый ползунок для сайта. Простой-то ползунок сделать просто. Достаточно ввести в html код тег input с атрибутом type=»range», как любой браузер поймёт, что на экране нужно вывести ползунок.

Вот пожалуйста, вставляем в любом месте

<input type="range">

И получаем там же

Невзрачненько. Чтоб сделать этот бегунок красивым, можно применить css, но не всё так просто. Дело в том, что каждый браузер отображает бегунок по своему.

Я не стану забивать Вам мозги подробностями, почему так происходит, Вы же ещё только начинающие, и многое Вам будет совершенно не понятно.

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

Далее я Вам дам несколько вариантов кода с объясняющими комментариями, и Вы методом научного тыка и матерного слова (самый результативный метод), сможете поработать в Notepad ++ над внешним видом бегунка.

Про незнакомые элементы кода, лучше всего можно узнать на сайте htmlbook. Более понятного и подробного описания, с примерами, в интернете нет.

Итак, код красивого бегунка:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
<style>
/* Контейнер */

input[type=range] {
	-webkit-appearance: none;
	margin: 50px;
	width: 20%;
}

input[type=range]:focus {
	outline: none;
}

/* Полоса в Хроме */

input[type=range]::-webkit-slider-runnable-track {
	height: 8px;
	cursor: pointer;
	animate: 0.2s;
	border: 1px solid #575656;
	background: #AD020D;
}

/* Бегунок в Хроме */

input[type=range]::-webkit-slider-thumb {
	box-shadow: 1px 1px 1px #000;
	border: 1px solid #000;
	height: 35px;
	width: 15px;
	border-radius: 40%/60%;
	background: #ffffff;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -14px;
}

/* Полоса в Мозиле */

input[type=range]::-moz-range-track {
	height: 8px;
	cursor: pointer;
	animate: 0.2s;
	box-shadow: 1px 1px 1px #000;
	background: #AD020D;
	border: 1px solid #575656;
}

/* Бегунок в Мозиле */

input[type=range]::-moz-range-thumb {
	box-shadow: 1px 1px 1px #000;
	border: 1px solid #000000;
	height: 36px;
	width: 16px;
	border-radius: 40%/60%;
	background: #ffffff;
	cursor: pointer;
}
</style>
</head>
<body>
	<input type="range" value="0" max="100"/>
</body>
</html>

А вот и он сам, работает, можно подвигать:

Ещё один пример, в котором линия, по которой двигается бегунок, является индикатором.

Код:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
<style>
/* контейнер */

input[type=range] {
	-webkit-appearance: none;
	appearance: none;
	width: 260px;
	height: 20px;
	padding: 0;
	box-shadow: inset 0 0 0 2px #2D7CFA;
	background: #AD020D;
	overflow: hidden;
}

/* Линия-ндикатор для Firefox */

input[type=range]::-moz-range-track {
	background: none;
	border: none;
}

/* ползунок в Firefox */

input[type=range]::-moz-range-thumb {
	-moz-appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 70%/30%;
	border: 2px solid #818181;
	box-shadow:
	-13px 0 #4A0101, -26px 0 #4A0101, -39px 0 #4A0101,
	-52px 0 #4A0101, -65px 0 #4A0101, -78px 0 #4A0101,
	-91px 0 #4A0101, -104px 0 #4A0101, -117px 0 #4A0101,
	-130px 0 #4A0101, -143px 0 #4A0101, -156px 0 #4A0101,
	-169px 0 #4A0101, -182px 0 #4A0101, -195px 0 #4A0101,
	-208px 0 #4A0101, -221px 0 #4A0101, -234px 0 #4A0101,
	-247px 0 #4A0101, -260px 0 #4A0101;
}

/* ползунок в Хроме */

input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width:20px;
	height:20px;
	border-radius: 70%/30%;
	border: 2px solid #818181;
	background: #fff;
	box-shadow:
	-13px 0 #4A0101, -26px 0 #4A0101, -39px 0 #4A0101,
	-52px 0 #4A0101, -65px 0 #4A0101, -78px 0 #4A0101,
	-91px 0 #4A0101, -104px 0 #4A0101, -117px 0 #4A0101,
	-130px 0 #4A0101, -143px 0 #4A0101, -156px 0 #4A0101,
	-169px 0 #4A0101, -182px 0 #4A0101, -195px 0 #4A0101,
	-208px 0 #4A0101, -221px 0 #4A0101, -234px 0 #4A0101,
	-247px 0 #4A0101, -260px 0 #4A0101;
} 
</style>
</head>
<body>
	<input type="range" value="0" max="100"/>
</body>
</html>

Результат, так же рабочий:

Чтоб метод тыка и матерного слова, не свёлся у Вас к простому копированию, а был осмысленным и, значит, более плодотворным, я убрал из кода обеих ползунков участок, предназначенный для IE.

Постарайтесь сделать его самостоятельно, и Вы получите наибольшую пользу от этой статьи.

Желаю творческих успехов.

Короткий отдых
Перекур

Мужчина упал с десятого этажа, и не разбился. Так целиком и похоронили.

Страница из блоков < < < ◊ > > > Вращающийся куб-баннер CSS

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

5 комментариев на «Ползунок html + CSS»

  1. Seo говорит:

    Спасибо за интересный материал. Да круто будет выводить отдельное значение в зависимости от положения слайдера.

  2. stariс говорит:

    Тут уж без JavaScript не обойтись, но об этом будет отдельная статья в разделе PHP

  3. Ян говорит:

    От ползунка толку мало, вот если бы в поле ввода значение изменялось

  4. stariс говорит:

    Применить javascript. По этой теме будет отдельный пост, так как она достаточно объёмная, и относиться к php.

  5. Андрей говорит:

    Здравствуйте, как увидеть текущее значение?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *