Разное

Slider html: How To Create Range Sliders

12.12.2022

HTML-слайдер-ответ — jsPsych

Этот плагин отображает HTML-контент и позволяет субъекту отвечать, перетаскивая ползунок.

Параметры

В дополнение к параметрам, доступным во всех плагинах, этот плагин принимает следующие параметры. Необходимо указать параметры со значением по умолчанию undefined . Другие параметры можно не указывать, если допустимо значение по умолчанию.

Параметр Тип Значение по умолчанию Описание
стимул Строка HTML не определено Отображаемая строка
этикетки массив строк [] Ярлыки отображаются на равноудаленных участках ползунка. Например, две метки будут размещены на концах ползунка. Три этикетки поместят две на концах и одну посередине. Четыре поместят два на концах, а два других будут на 33% и 67% ширины ползунка.
метка_кнопки строка «Продолжить» Метка кнопки завершения пробного периода.
мин целое число 0 Устанавливает минимальное значение ползунка.
макс. целое число 100 Устанавливает максимальное значение ползунка.
слайдер_старт целое число 50 Устанавливает начальное значение ползунка
шаг целое число 1 Устанавливает шаг ползунка. Это наименьшая величина, на которую может измениться ползунок.
слайдер_ширина целое число ноль Установите ширину ползунка в пикселях. Если оставить null, то ширина будет равна самому широкому элементу на дисплее.
требование_движения логическое значение ложь Если true, субъект должен переместить ползунок, прежде чем нажимать кнопку «Продолжить».
подсказка строка ноль Эта строка может содержать разметку HTML. Любой контент здесь будет отображаться под стимулом. Намерение состоит в том, что его можно использовать для напоминания о действии, которое должен предпринять субъект (например, какую клавишу нажать).
stimulus_duration числовой ноль Как долго отображать стимул в миллисекундах. Свойство CSS видимости стимула будет установлено на скрыто по истечении этого времени. Если это значение равно нулю, то стимул останется видимым до окончания испытания.
пробная_продолжительность числовой ноль Время ожидания ответа субъекта перед завершением испытания в миллисекундах. Если субъект не ответит до истечения этого таймера, ответ субъекта будет записан как нулевой для испытания, и испытание будет завершено. Если значение этого параметра равно null, то пробная версия будет ждать ответа неопределенно долго.
response_ends_trial логическое значение правда Если true, то испытание будет завершено всякий раз, когда субъект даст ответ (при условии, что он сделает свой ответ до отсечки, заданной параметром trip_duration). Если false, пробная версия будет продолжаться до тех пор, пока не будет достигнуто значение для trip_duration . Вы можете установить для этого параметра значение
false , чтобы заставить субъекта просматривать стимул в течение фиксированного периода времени, даже если он отвечает до истечения времени.

Сгенерированные данные

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

Имя Тип Значение
ответ числовой Числовое значение ползунка.
рт числовой
Время в миллисекундах, необходимое субъекту для ответа. Время измеряется с момента первого появления стимула на экране до реакции субъекта.
стимул строка HTML-контент, отображаемый на экране.
слайдер_старт числовой Начальное значение ползунка.

Примеры

Отображается вопрос, пока тема не переместит ползунок

Код

 var пробная версия = {
    тип: jsPsychHtmlSliderResponse,
    стимул: `

        
Насколько вероятно, что команда А выиграет этот матч?

        <дел>
            
КОМАНДА А

            
10 побед, 5 поражений, 6 ничьих

        
 

        <дел>
            
КОМАНДА Б

            
6 побед, 4 поражения, 11 ничьих
`, require_movement: правда, метки: ['100% шанс на победу команды А', '50% шанс на победу команды А', '0% шанс на победу команды А'] };

Демо

Открыть демо в новой вкладке

Double Slider — Metro UI :: Популярная библиотека HTML, CSS и JS

Позвольте пользователю указать числовое значение диапазона с помощью компонента двойного ползунка.

О слайдере

Компонент doubleslider позволяет пользователю указать числовое значение диапазона, которое должно быть не меньше заданного значения и не больше другого заданного значения. Чтобы создать doubleslider добавить атрибут data-role="doubleslider" к элементу ввода.

                    <входная роль данных = "двойной слайдер">

Значение ползунка

Ползунок возвращает значение , разделенное запятыми, .

Возврат фактического значения 
                     val(this.value)">
                    <тип ввода="текст">

Вы можете изменить атрибут data-value-min , data-value-max во время выполнения, и ползунок будет обновлен.

Точность

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

Дополнительная цель

Вы можете установить значение ползунка для дополнительных целей. Чтобы установить его, добавьте к элементу атрибут data-target="..." . Значение этого атрибута должно быть строкой, специфичной для селектора.

                    
 

                    <дел>
                    <тип ввода="текст">

Подсказка

Вы можете включить подсказку для ползунка. Чтобы включить подсказку , добавьте к элементу атрибут data-hint="true" .

Также вы можете сделать подсказку постоянной. Чтобы установить

подсказку в постоянном режиме , добавьте атрибут data-hint-always="true" .
Позиция подсказки

Вы можете установить позицию подсказки с атрибутом data-hint-position-min и data-hint-position-max . Чтобы установить конкретную позицию, используйте следующие значения для этого атрибута: топ ,

дно , оставил и справа .
Значение подсказки

Вы можете использовать шаблон для значения подсказки с двумя переменными $1 .

                     : $1"
                           подсказка-данные-всегда = "истина"
                           значение данных мин = "20"
                           максимальное значение данных = "80"
                           data-cls-hint="bg-cyan fg-white">

Опции

События

Когда ползунок работает, он генерирует номера событий. Вы можете использовать обратный вызов для этого события для поведения ползунка.

onStart(значение, процент, ползунок) данные при запуске Срабатывает при начале скольжения
onStop(значение, процент, ползунок) данные на остановке Срабатывает при остановке скольжения
onMove (значение, процент, ползунок) данные о перемещении Запускается, когда пользователь перемещает маркер ползунка
onChange(значение, проценты) значение данных об изменении Запускается при изменении значения ползунка
onChangeValue(val) значение данных об изменении Запускается при изменении значения ползунка
onFocus(значение, процент, ползунок) данные о фокусе Запускается, когда маркер ползунка получает фокус
onBlur(значение, процент, ползунок) данные о размытии Запускается, когда маркер ползунка теряет фокус
onDoubleSliderCreate(слайдер) создание данных о слайдере Запускается при создании ползунка

Также вы можете использовать стандартный onchage событие для input с data-role="slider" .

                    <входная роль данных = "слайдер"
                        данные-шоу-мин-макс = "истина"
                        данные-мин = "-100" данные-макс = "100"
                        data-on-change-value="$('#event-receiver').val('Value: '+arguments[0])">
                    <тип ввода="текст">

Методы

Кроме того, вы можете использовать методы ползунка для взаимодействия с компонентом.

  • val() — получить значение
  • знач(vMin, vMax) — установить значение
                    <дел>
                        <дел>
                            <тип ввода="текст" мин="0" макс="100"
                            oninput="Metro.getPlugin('#slider','slider').val(this.value)">