Как сделать ползунок в html: Ползунок | htmlbook.ru

29.07.2023 alexxlab

Содержание

Ползунок в HTML (оформление и вывод значения)

Всем привет!
Сделать ползунок в HTML – не проблема, для многих сделать это – проще простого. А вот оформить и красиво вывести значение ползунка умеют не все.
Так вот, в сегодняшней статье я расскажу, как создать ползунок, как вывести результат и как оформить ползунок.

С чего же начнем? Начнем с того, что я покажу, каким тегом создается ползунок, и какие атрибуты у него есть.
Для создания ползунка в HTML существует тег «input»:

<input ENGINE="range">

В результате получится вот такое:

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

Атрибуты:

Пример:


<input type="range" min="0" max="10" list="rangeList1">
<datalist>
<option value="0" label="0">
<option value="5" label="5">
<option value="10" label="10">
</datalist>

Обратите внимание на имя «rangeList1».

Посмотрите, где я его прописал в коде. Это имя может быть любым, но должно быть уникальным и писаться латинскими буквами. Имя в id должно соответствовать имени «list».

Name — присваивает имя ползунку.
Step — устанавливает интервал увеличения значения (перемещения) ползунка.
Значение по умолчанию: «1».
Value — указывает числовое значение ползунка, отправляемое на сервер или используемое сценариями.

Как вывести значение ползунка?

Все, конечно, круто, но какой смысл в ползунке, если он ничего не выводит.
Сейчас мы все исправим и выведем значение средствами JavaScript без какой-либо магии.

onchange="document.getElementById('rangeValue').innerHTML = this.value;"

Вот этот код нужно вставить в ползунок.
Заметьте, если в скобках вы указали «rangeValue», тогда при выводе результата нужно тоже указать это же имя, а иначе работать не будет:

<span>5</span>

Полный пример:


<input type="range" step="5" min="0" max="10" list="rangeList" onchange="document. getElementById('rangeValue').innerHTML = this.value;">
<datalist>
<option value="0" label="0">
<option value="5" label="5">
<option value="10" label="10">
</datalist>
<span>5</span>

А вот и результат:

[ посмотреть демонстрацию ]

Также в интернете нашел вот такой способ, как мне показалось, очень интересный:


<form onsubmit="return false" oninput="level.value = flevel.valueAsNumber">
<input name="flevel" type="range" min="20" max="10000" value="20" step="10">
<output for="flying" name="level">20</output>
</form>

Результат:

[ посмотреть демонстрацию ]

Как оформить ползунок?

Итак, мы имеем стандартный ползунок, и отображается он на каждом браузере по-разному:

Приступим к изменению вида

В браузерах Chrome, Safari и Opera

Отменим стандартные стили Webkit/Chrome. Для этого зададим свойству «-webkit-appearance» значение «none»:


input[type=range]
{
-webkit-appearance: none
}

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


input[type=range]::-webkit-slider-runnable-track {
border-radius: 10px;
height: 10px;
border: 1px solid #000;
background-color: #ccc;
}

В результате это выглядит пока что вот так:

Теперь изменим ползунок:


input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #000;
border: 3px solid #0b6b00;
width: 20px;
height: 20px;
border-radius: 10px;
cursor: pointer;
margin-top: -5px;
}

В результате:

В браузере Firefox

Псевдоэлемент «::-moz-range-track» повлияет на полосу ползунка, а «::-moz-range-track» повлияет на ручку ползунка.

Пробуем:


input[type=range]::-moz-range-track
{
border-radius: 10px;
height: 10px;
border: 1px solid #666;
background-color: #ccc;
}

input[type=range]::-moz-range-thumb
{
background-color: #000;
border: 3px solid #0b6b00;
width: 20px;
height: 20px;
border-radius: 20px;
cursor: pointer;
}

В браузере Internet Explorer

Дошла очередь до самого известного и самого корявого, как по мне, браузера Internet Explorer:


input[type="range"]::-ms-track {
border-radius: 10px;
height: 10px;
border: 1px solid #666;
background-color: #ccc;
}

input[type="range"]::-ms-thumb
{
background-color: #000;
border: 3px solid #0b6b00;
width: 20px;
height: 20px;
border-radius: 10px;
cursor: pointer;
}

Так что, если хотите, чтобы ползунки более-менее отображались одинаково на всех браузерах, придется писать большой код на CSS, для каждого браузера свой.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

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

Метки: css, html, javascript, Вебмастеру, для сайта

Ползунок 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

Создание пользовательского диапазона ввода, который выглядит одинаково во всех браузерах — Smashing Magazine

11 мин чтения
HTML, CSS, Браузеры, Techniques
Поделиться в Twitter, LinkedIn

Об авторе

Алисса Холланд имеет степень в области компьютерных наук Университета штата Флорида и профессионально работает разработчиком интерфейса. У нее сильная страсть к… Больше о Alyssa ↬

Диапазон ввода, как известно, был проблемой для стиля. Каждый браузер отображает ввод по-разному, требуя от вас использования префиксов поставщиков для создания целостного внешнего вида. В этой статье мы рассмотрим причудливость ввода диапазона HTML и продемонстрируем, как стилизовать ввод, чтобы он выглядел одинаково во всех основных браузерах.

Как один из сопровождающих библиотеки компонентов пользовательского интерфейса, я реализовал и стилизовал множество элементов ввода. Однажды мне поручили добавить вход диапазона в библиотеку, и я подумал, что это будет процесс, аналогичный другим входам, которые я реализовал в прошлом. Это предположение было верным, пока я не начал тестировать ввод диапазона в нескольких браузерах и быстро не понял, что у меня гораздо больше работы.

После долгих исследований я, наконец, смог найти достаточно сообщений в блогах, статей и подробных руководств, которые помогли мне стилизовать ввод диапазона для последовательной визуализации. Вместо того, чтобы искать несколько ресурсов, цель этого поста в блоге — предоставить универсальный магазин для изучения того, как правильно стилизовать ввод диапазона, который будет выглядеть одинаково во всех браузерах. Это статья, которую я хотел бы иметь, когда мне приходилось делать это самому, и я надеюсь, что она поможет сделать этот процесс более быстрым и гладким для вас.

Анатомия ввода диапазона

Ввод диапазона состоит из двух основных частей:

Дорожка
Это часть ползунка, по которой перемещается большой палец . Или, другими словами, это длинный элемент, представляющий диапазоны значений, которые можно выбрать.
Большой палец
Это элемент на дорожке, который пользователь может перемещать для выбора различных значений диапазона.

Ввод диапазона состоит из дорожки и бегунка. (большой превью)
Если бы это было математическое уравнение:
ввод диапазона = дорожка + большой палец
Ввод диапазона иногда называют «ползунком», и в оставшейся части этой статьи я буду использовать эти термины взаимозаменяемо.
Несоответствия браузеров
Чтобы продемонстрировать, почему нам вообще нужно руководство по стилю ввода диапазона, мы рассмотрим несколько снимков экрана ввода диапазона HTML по умолчанию и того, как он отображается в четырех основных браузерах (Chrome , Firefox, Safari и Edge). Или, если хотите, вы можете просмотреть эту демонстрацию CodeSandbox в каждом из соответствующих браузеров, чтобы увидеть несоответствия браузеров во всей их красе.
Примечание: Эти снимки экрана были сделаны по состоянию на сентябрь 2021 года и могут быть изменены по мере обновления соответствующих браузеров.
Давайте начнем с Chrome, который, на мой взгляд, по умолчанию отображает наиболее удобную для пользователя версию ввода.
Демонстрация Chrome ввода диапазона HTML по умолчанию. (Большой предварительный просмотр)
Firefox является следующим и выглядит иначе, чем ввод, отображаемый Chrome. В Firefox высота дорожки немного короче. С другой стороны, высота и ширина большого пальца больше и не имеют такого же синего цвета фона, как в версии для Chrome.
Демонстрация Firefox ввода диапазона HTML по умолчанию. (Большое превью)
Слайдер Safari выглядит ближе всего к версии Firefox, но, опять же, он все еще отличается. На этот раз кажется, что дорожка имеет теневой эффект, а высота и ширина бегунка меньше, чем в версиях Chrome и Firefox. Если вы присмотритесь, вы также увидите, что большой палец не находится прямо по центру дорожки, что придает ей неполированный вид.
Демонстрационная версия Safari для ввода диапазона HTML по умолчанию. (большой превью)
И последнее, но не менее важное — это Edge, который теперь, когда Microsoft Edge построен на основе Chromium, гораздо больше соответствует трем другим браузерам, чем его предшественник до Chromium. Однако мы видим, что он по-прежнему отображается иначе, чем в трех других браузерах. Представление Edge ввода диапазона очень похоже на версию Chrome, за исключением более темного серого цвета фона для большого пальца и левой стороны дорожки перед большим пальцем.
Демонстрационная версия Edge для ввода диапазона HTML по умолчанию. (большой превью)
Теперь, когда мы увидели, насколько непоследовательно каждый браузер отображает ввод диапазона, мы посмотрим, как мы можем использовать CSS для их унификации.
Больше после прыжка! Продолжить чтение ниже ↓
Сброс диапазона (базовые стили)
Поскольку несоответствия браузеров сильно различаются, нам нужно начать с равных условий. Как только стили по умолчанию, применяемые каждым браузером, будут удалены, мы можем начать работать над тем, чтобы сделать ввод более унифицированным. Мы будем использовать input[type="range"] селектор атрибутов элемента и примененные здесь стили будут действовать как сброс CSS для ввода.
Чтобы применить базовые стили, нам нужны четыре свойства:
-webkit-appearance: none;
Это свойство является префиксом поставщика, применимым ко всем основным браузерам. Присвоив ему значение none , это говорит каждому соответствующему браузеру очистить все стили по умолчанию. Это позволяет нам начать с нуля и построить внешний вид ввода с этой точки.
фон: прозрачный;
Удаляет фон по умолчанию, который применяется к входу.
курсор: указатель;
ширина
Устанавливает общую ширину ввода.
ввод [тип = "диапазон"] { -webkit-внешний вид: нет; внешний вид: нет; фон: прозрачный; курсор: указатель; ширина: 15рем; }
Ввод диапазона в Chrome перед фоном: применяется прозрачность. (Большой предварительный просмотр) Ввод диапазона в Chrome после применения всех стилей сброса. (большой превью)
Стилизация дорожки
При стилизации дорожки (и бегунка) нам нужно настроить таргетинг на префиксы конкретных поставщиков различных браузеров, чтобы применить надлежащие стили к соответствующему элементу. В будущем любой псевдоэлемент с префиксом -webkit будет применяться к браузерам Chrome, Safari, Opera и Edge (после Chromium). Все, что имеет префикс -moz , относится к Firefox.
Ниже приведены псевдоэлементы, которые мы будем использовать для нацеливания на трек:
::-webkit-slider-runnable-track
Нацеливается на трек в Chrome, Safari и Edge Chromium.
::-moz-range-track
Нацеливает на дорожку в Firefox.
/***** Стили дорожек *****/ /***** Chrome, Safari, Opera и Edge Chromium *****/ input[type="range"]::-webkit-slider-runnable-track { фон: #053a5f; высота: 0,5бэр; } /******** Fire Fox ********/ input[type="range"]::-moz-range-track { фон: #053a5f; высота: 0,5бэр; }
Единственными обязательными свойствами трека являются высота и фон . Тем не менее, часто можно увидеть border-radius , применяемый для закругления краев.
Ввод диапазона в Firefox после применения стилей дорожки. (Большой предварительный просмотр)
Стилизация большого пальца
Стилизация большого пальца (средняя ручка, которую перемещает пользователь) имеет больше нюансов, которые необходимо учитывать, поскольку существует больше несоответствий между браузерами в этой части ввода диапазона.
Ниже приведены псевдоэлементы, которые мы будем использовать для нацеливания на большой палец:
::-webkit-slider-thumb
Нацелены на большой палец в Chrome, Safari и Edge Chromium.
::-moz-range-thumb
Нацеливает на большой палец в Firefox.
Поскольку браузеры Firefox и Webkit имеют разные проблемы со стилем, я рассмотрю каждую проблему отдельно и покажу, как справиться с каждым из причудливых значений по умолчанию, которые применяются к большому пальцу.
Chrome, Safari, Edge Chromium (Webkit)
Первый стиль, который нам нужно применить к псевдоэлементу ::-webkit-slider-thumb , — это -webkit-appearance: none; Префикс поставщика . Мы использовали это свойство в разделе «Базовые стили», чтобы переопределить общие стили по умолчанию, которые применяются браузером, и оно служит аналогичной цели для большого пальца.
Ввод диапазона в Chrome после -webkit-appearance: нет; применяется. (Большой предварительный просмотр)
Как только стили по умолчанию будут удалены, мы сможем применить наши собственные стили. Предположим, мы применяем height , width и background-color для большого пальца, вот пример того, что у нас было до сих пор:
Диапазон ввода в Chrome с пользовательскими стилями большого пальца. (Большой предварительный просмотр)
По умолчанию браузеры WebKit отображают бегунок так, что он не находится по центру дорожки.
Чтобы правильно центрировать бегунок на дорожке, мы можем использовать следующую формулу и применить ее к свойству margin-top :
margin-top = (высота дорожки в пикселях / 2) — (высота бегунка в пикселях /2)
Взяв стили, которые мы применили в предыдущих разделах, и конвертировав rems в пиксели, мы получили бы высоту дорожки 8px и высоту большого пальца 32px. Это будет означать, что:
margin-top = (8/2) — (32/2) = 4 — 16 = -12px
Исходя из этого, наши окончательные стили для браузеров webkit будут выглядеть как следующий блок кода:
/***** Стили большого пальца *****/ /***** Chrome, Safari, Opera и Edge Chromium *****/ input[type="range"]::-webkit-slider-thumb { -webkit-внешний вид: нет; /* Переопределить внешний вид по умолчанию */ внешний вид: нет; верхнее поле: -12px; /* Направляет бегунок по центру дорожки */ цвет фона: #5cd5eb; высота: 2бэр; ширина: 1рем; }
Ввод диапазона в Chrome после применения всех стилей. (Большой предварительный просмотр)
Firefox
При применении стилей к бегунку в Firefox вам потребуется использовать псевдоэлемент ::-moz-range-thumb . К счастью, Firefox не страдает от той же проблемы с центрированием, что и браузеры Webkit. Тем не менее, есть одна проблема, связанная с радиусом границы по умолчанию и серой рамкой, которые применяются к большому пальцу.
(Большой предварительный просмотр)
Чтобы исправить серую рамку по умолчанию, мы можем добавить граница: нет; недвижимость. Чтобы удалить применяемый радиус границы по умолчанию, мы можем добавить свойство border-radius: 0 , и теперь бегунок будет выглядеть одинаково во всех браузерах.
Исходя из этого, наши окончательные стили для браузера Firefox будут выглядеть так:
/***** Thumb Styles *****/ /***** Fire Fox *****/ input[type="range"]::-moz-range-thumb { граница: нет; /*Удаляет дополнительную границу, которую применяет FF*/ радиус границы: 0; /*Удаляет радиус границы по умолчанию, который применяется FF*/ цвет фона: #5cd5eb; высота: 2бэр; ширина: 1рем; }
Примечание: Браузеры Webkit не применяют автоматически этот радиус к границе, поэтому, если вы обнаружите, что хотите применить некоторую форму радиуса границы к большому пальцу, а не отменить его, как мы сделали выше, вам нужно будет применить желаемые размеры border-radius к псевдоэлементам -webkit-slider-thumb и ::-moz-range-thumb .
Стили фокуса
Поскольку ввод диапазона является интерактивным элементом, необходимо добавить стили фокуса, чтобы соответствовать рекомендациям и стандартам специальных возможностей. Когда применяются стили фокуса, это обеспечивает визуальный индикатор для пользователей и особенно важно для тех, кто использует клавиатуру для навигации по странице.
В соответствии с документацией WAI-ARIA: Slider рекомендуется следующее:
Фокус помещается на ползунок (визуальный объект, который перемещает пользователь мыши, также известный как большой палец).
Первое, что мы хотим сделать, это удалить стили фокуса по умолчанию, чтобы мы могли заменить их пользовательскими стилями. Чтобы ориентироваться на стили фокуса большого пальца, мы можем использовать псевдоэлементы ::-webkit-slider-thumb и ::-moz-range-thumb , которые мы использовали в предыдущем разделе, и объединить их с :focus псевдокласс. Затем мы можем использовать свойства CSS-контура и контура-смещения, чтобы стилизовать его так, как мы хотим.
/***** Стили фокусировки *****/ /* Удаляет фокус по умолчанию */ ввод [тип = "диапазон"]: фокус { контур: нет; } /***** Chrome, Safari, Opera и Edge Chromium *****/ input[type="range"]:focus::-webkit-slider-thumb { граница: 1px сплошная #053a5f; контур: 3 пикселя сплошной #053a5f; смещение контура: 0,125 бэр; } /******** Fire Fox ********/ input[type="range"]:focus::-moz-range-thumb { граница: 1px сплошная #053a5f; контур: 3 пикселя сплошной #053a5f; смещение контура: 0,125 бэр; }
Примечание : Если к большому пальцу применен радиус границы , Firefox отображает контур в форме большого пальца , в то время как другие браузеры отображают блочный контур. К сожалению, для этого нет простого исправления CSS, и это единственное несоответствие, которое будет присутствовать. Тем не менее, основная цель добавления этих стилей заключается в обеспечении доступности, а основная цель, предоставление визуального индикатора, когда элемент находится в фокусе, по-прежнему достигается.
Ввод диапазона в Chrome с применением настраиваемых стилей фокуса. (Большой предварительный просмотр)
Собираем все вместе
Теперь, когда мы рассмотрели все стили, необходимые для унификации ввода диапазона, вот как будет выглядеть окончательная таблица стилей CSS:
/********** Стили ввода диапазона **********/ /*Сброс диапазона*/ ввод[тип="диапазон"] { -webkit-внешний вид: нет; внешний вид: нет; фон: прозрачный; курсор: указатель; ширина: 15рем; } /* Удаляет фокус по умолчанию */ ввод [тип = "диапазон"]: фокус { контур: нет; } /**** Стили Chrome, Safari, Opera и Edge Chromium *****/ /* бегунок */ input[type="range"]::-webkit-slider-runnable-track { цвет фона: #053a5f; радиус границы: 0,5 бэр; высота: 0,5бэр; } /* бегунок ползунка */ input[type="range"]::-webkit-slider-thumb { -webkit-внешний вид: нет; /* Переопределить внешний вид по умолчанию */ внешний вид: нет; верхнее поле: -12px; /* Направляет бегунок по центру дорожки */ /*пользовательские стили*/ цвет фона: #5cd5eb; высота: 2бэр; ширина: 1рем; } input[type="range"]:focus::-webkit-slider-thumb { граница: 1px сплошная #053a5f; контур: 3 пикселя сплошной #053a5f; смещение контура: 0,125 бэр; } /*********Стили Firefox ********/ /* бегунок */ input[type="range"]::-moz-range-track { цвет фона: #053a5f; радиус границы: 0,5 бэр; высота: 0,5бэр; } /* бегунок ползунка */ input[type="range"]::-moz-range-thumb { граница: нет; /*Удаляет дополнительную границу, которую применяет FF*/ радиус границы: 0; /*Удаляет радиус границы по умолчанию, который применяется FF*/ /*пользовательские стили*/ цвет фона: #5cd5eb; высота: 2бэр; ширина: 1рем; } input[type="range"]:focus::-moz-range-thumb { граница: 1px сплошная #053a5f; контур: 3 пикселя сплошной #053a5f; смещение контура: 0,125 бэр; }
Заключение
В дополнение к методам, описанным в статье, вы также можете воспользоваться созданным мной генератором CSS для ввода диапазона под названием range-input. css . Суть этого проекта заключалась в создании инструмента, упрощающего этот процесс для разработчиков. Генератор CSS позволяет быстро стилизовать общие свойства CSS и предоставляет демонстрационный ползунок, который отображает в режиме реального времени предварительный просмотр стилей, которые вы хотите применить.
Будем надеяться, что в будущем ввод диапазона стилей станет проще. Однако до тех пор, пока этот день не наступит, знание того, на какие псевдоэлементы и префиксы поставщиков следует ориентироваться, поможет вам добиться успеха на пути к стилизации слайдеров в соответствии с вашими потребностями.
Дополнительные ресурсы в журнале Smashing Magazine
Генераторы CSS
Упрощение стилей форм с помощью акцентного цвета
Интеллектуальные CSS-решения для распространенных задач пользовательского интерфейса
Глубокое погружение в объект -подходят И фон-размер В CSS
Как создать слайдер изображения и добавить его в HTML-файл
<noscript><img loading='lazy' src='/800/600/https/i.pinimg.com/originals/ae/9a/b7/ae9ab7520a1a91178537645a3125d4d0.jpg' /></noscript> youtube.com/embed/FpZu9Cxpacs?rel=0″ frameborder=»0″ allowfullscreen=»»>
1. Загрузите WOWSlider
Вам следует начать с загрузки WOWSlider, если вы еще этого не сделали. Перейдите на сайт wowslider.com и нажмите ссылку «Скачать» в верхнем меню. Вы должны ввести свой адрес электронной почты, чтобы получить доступ к программному обеспечению.
После отправки электронной почты вы будете перенаправлены на страницу, где сможете скачать WOWSlider. Существует версия для Windows и версия для Mac, поэтому просто нажмите на соответствующую ссылку для вашего компьютера.
Загрузите и установите программное обеспечение.
Затем откройте WOWSlider, чтобы создать свое первое слайд-шоу.
2. Создайте свой слайдер
У вас должно быть несколько готовых изображений для добавления в слайд-шоу. Добавлять изображения в WOWSlider легко, просто перетащите их в главное окно WOWSlider. Также вы можете нажать на кнопку «Добавить изображения и видео», расположенную в верхней части окна приложения.
Есть много способов добавить изображения, и сейчас мы выберем первый.
Затем нажмите на настройки — значок в верхнем меню, который выглядит как гаечный ключ.
Выберите любые настройки, которые вы хотите применить к слайдеру, например. «Пауза при наведении курсора» или «случайный порядок», установив флажки.
Вы также должны нажать на вкладку «Дизайн» в верхней панели окна настроек. Выберите размер слайдера.
Выберите шаблон для слайдера. Существует множество различных шаблонов на выбор, поэтому вы сможете найти тот, который соответствует внешнему виду вашего веб-сайта.
Настройте ползунок «качество» на то, что вам подходит. Слайдер высокого качества будет иметь чрезвычайно четкие и четкие изображения, но загрузка может занять больше времени. Слайдер более низкого качества будет иметь немного менее четкие изображения, но будет быстрее загружаться.
Применить эффект перехода — эффект, который используется для перехода от одного изображения в слайд-шоу к другому. Fade — это хороший вариант по умолчанию, который работает практически с каждым веб-сайтом, но есть также множество других, более творческих вариантов на выбор.
Отрегулируйте задержку между слайдами, которая определяет количество времени, в течение которого отображается каждое изображение. Хороший выбор — около 10 секунд, что дает людям достаточно времени, чтобы посмотреть на изображение и прочитать любые описания или заголовки, которые вы добавили.
3. Экспортируйте свой слайдер
Нажмите на вкладку «Опубликовать», выберите метод «Опубликовать в папку» или «Опубликовать на FTP-сервере» и выберите правильную папку для WOWSlider для создания HTML-файлов и папок с изображениями.
Когда вы выбрали правильное место, нажмите кнопку «Опубликовать» в нижней части окна. WOWSlider экспортирует ваш слайдер и, когда он будет завершен, откроет ваш слайдер в окне браузера, чтобы вы могли его просмотреть.
На странице вы увидите ползунок и полезные инструкции под ним. Вы всегда можете прочитать их, когда будете публиковать свой слайдер, чтобы никогда не забыть, как добавить его на свой сайт. А теперь мы собираемся добавить слайдер на нашу собственную веб-страницу или сайт.
4. Добавьте слайдер на свою веб-страницу
Скопируйте папки data1 и engine1 из папки WOWSlider в то же место, где находится файл HTML, где вы используете слайдер. Это важный шаг, так как иначе слайдер не сможет найти нужные для загрузки изображения и скрипты. В папке data1 хранятся все отредактированные изображения с правильным размером, а в папке engine1 хранятся скрипты.
Посмотрите на шаг 2 в файле wowslider-howto.html.
Скопируйте код раздела HEAD между

и
.
Это код, необходимый для работы слайдера, так как он содержит ссылки на файл css и файл jquery.
Откройте веб-страницу в программе редактирования HTML, такой как Notepad, Notepad++, Dreamweaver или в любом другом предпочитаемом вами редакторе.