JQuery UI пример - Slider (слайдер)

Предыдущий: Jquery UI пример - прогресс бар (Progressbar)

Далее: пример JQuery UI - ротатор (Spinner)

Перетащите ручку, чтобы выбрать значение.

Для получения более подробной информации о ползуна, см API документации ползун (ползунка виджете) .

По умолчанию функция

Основной ползунок по горизонтали и имеет одну ручку, можно перемещать с помощью мыши или клавиш со стрелками.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI Slider (слайдер) - функция по умолчанию </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#slider") .slider ();
  });
  </ Script>
</ Head>
<Body>
 
<Div ID = "слайдер"> </ DIV>
 
 
</ Body>
</ HTML>

Выбор цвета

Комбинация из трех ползунков, чтобы создать простую RGB палитру цветов.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI Slider (слайдер) - Выбор цвета </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #red, #green, #blue {
    плавать: слева;
    ясно: слева;
    ширина: 300px;
    Запас: 15px;
  }
  #swatch {
    ширина: 120px;
    высота: 100px;
    Маржа-топ: 18px;
    Левое поле: 350 пикселей;
    Фоновое изображение: нет;
  }
  #red .ui-слайдер-диапазона {фон: # ef2929;}
  #red .ui-слайдер-ручка {граница цвета: # ef2929;}
  #green .ui-слайдер-диапазона {фон: # 8ae234;}
  #green .ui-слайдер-ручка {граница цвета: # 8ae234;}
  #blue .ui-слайдер-диапазона {фон: # 729fcf;}
  #blue .ui-слайдер-ручка {граница цвета: # 729fcf;}
  </ Style>
  <Script>
  Функция hexFromRGB (г, г, б) {
    шестигранный вар = [
      r.toString (16),
      g.toString (16),
      b.toString (16)
    ];
    $ .each (Hex, функция (№, Валя) {
      если (val.length === 1) {
        шестигранные [нет] = "0" + знач;
      }
    });
    вернуть hex.join ( "") .toUpperCase ();
  }
  Функция refreshSwatch () {
    вар красный = $ ( "#red") .slider ( "значение"),
      зеленый = $ ( "#green") .slider ( "значение"),
      синий = $ ( "#blue") .slider ( "значение"),
      шестигранный = hexFromRGB (красный, зеленый, синий);
    $ ( "#swatch") .css ( "Цвет фона", "#" + шестигранный);
  }
  $ (Function () {
    $ ( "#red, #green, #blue") .slider ({
      Ориентация: «горизонтальный»,
      Диапазон: "мин",
      макс: 255,
      Значение: 127,
      слайд: refreshSwatch,
      изменение: refreshSwatch
    });
    $ ( "#red") .slider ( "Value", 255);
    $ ( "#green") .slider ( "Value", 140);
    $ ( "#blue") .slider ( "Value", 60);
  });
  </ Script>
</ Head>
<Класс Body = "UI-виджета-контент" стиль = "границы: 0;">
 
<P класс = "Пользовательский интерфейс состояния по умолчанию пользовательский интерфейс-краеугольный все UI-хелпер-clearfix" стиль = "обивка: 4px;">
  <Класс = "UI-значок UI-значок карандаша" стиль Span = "плавать: слева; поле: -2px 5px 0 0;"> </ SPAN>
  Простой селектор цвета </ p>
 
<Div ID = "красный"> </ DIV>
<Div ID = "зеленый"> </ DIV>
<Div ID = "синий"> </ DIV>
 
<Div ID = "Swatch" класс = "UI-виджета-контента UI-краеугольный все"> </ DIV>
 
 
</ Body>
</ HTML>

Множество ползунков

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

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI Slider (слайдер) - ползунки </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  пролет #eq {
    высота: 120px; флоат: слева; поле: 15px
  }
  </ Style>
  <Script>
  $ (Function () {
    // Установить Master Volume $ ( "#master") .slider ({
      Значение: 60,
      Ориентация: «горизонтальный»,
      Диапазон: "мин",
      анимации: правда
    });
    // Установка графического эквалайзера $ ( "#eq> Пролет") .each (функция () {
      // Считывает начальное значение из тега и удалить значение VAR = ParseInt ($ (это) .text (), 10);
      $ (Это) .empty (). Slider ({
        Значение: значение,
        Диапазон: "мин",
        анимации: правда,
        Ориентация: "вертикальный"
      });
    });
  });
  </ Script>
</ Head>
<Body>
 
<P класс = "Пользовательский интерфейс состояния по умолчанию пользовательский интерфейс-краеугольный все UI-хелпер-clearfix" стиль = "обивка: 4px;">
  <Span класс = "UI-значок UI-значок объема-на" стиль = "поплавком: слева; поле: -2px 5px 0 0;"> </ SPAN>
  Master Volume </ p>
 
<Div ID = "мастер" стиль = "ширина: 260px; маржа: 15px;"> </ DIV>
 
<P класс = "Пользовательский интерфейс состояния по умолчанию пользовательский интерфейс угла всех" стиль = "обивка: 4px; маржа-топ: 4em;">
  <Span класс = "UI-значок UI-значок сигнала" стиль = "плавать: слева; поле: -2px 5px 0 0;"> </ SPAN>
  Графический эквалайзер </ p>
 
<Div ID = "эк">
  <SPAN> 88 </ SPAN>
  <SPAN> 77 </ SPAN>
  <SPAN> 55 </ SPAN>
  <SPAN> 33 </ SPAN>
  <SPAN> 40 </ SPAN>
  <SPAN> 45 </ SPAN>
  <SPAN> 70 </ SPAN>
</ Div>
 
 
</ Body>
</ HTML>

Диапазон Slider

Установка range опция истинна, чтобы получить диапазон значений с двумя ручками сопротивления. Между рукояткой управления с другим цветом фона заполнения, чтобы указать значение интервала является необязательным.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI Slider (слайдер) - Диапазон слайдер </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "# Slider-диапазон") .slider ({
      Диапазон: правда,
      мин: 0,
      макс: 500,
      значения: [75, 300],
      слайд: функция (событие, щ) {
        $ ( "#amount") .val ( "$" + Ui.values [0] + "- $" + ui.values [1]);
      }
    });
    $ ( "#amount") .val ( "$" + $ ( "# Slider-диапазон") .slider ( "ценности", 0) +
      "- $" + $ ( "# Slider-диапазон") .slider ( "ценности", 1));
  });
  </ Script>
</ Head>
<Body>
 
<P>
  <Ярлык = "количество"> Диапазон цен: </ метка>
  <Тип входного = "Текст" ID = "количество" стиль = "границы: 0; цвет: # f6931f; шрифта: жирный;">
</ P>
 
<Div ID = "слайдер-диапазона"> </ DIV>
 
 
</ Body>
</ HTML>

С фиксированным максимальным диапазоном

Фиксация максимального диапазона ползунка, пользователь может выбрать минимум. Установка range параметр "Макс".

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI Slider (слайдер) - диапазон с фиксированным максимумом </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "# Slider-диапазон-макс") .slider ({
      Диапазон: "Макс",
      мин: 1,
      макс: 10,
      Значение: 2,
      слайд: функция (событие, щ) {
        $ ( "#amount") .val (Ui.value);
      }
    });
    $ ( "#amount") .val ($ ( "# Slider-диапазон-макс") .slider ( "значение"));
  });
  </ Script>
</ Head>
<Body>
 
<P>
  <Ярлык = "количество"> Минимальное количество комнат: </ метка>
  <Тип входного = "Текст" ID = "количество" стиль = "границы: 0; цвет: # f6931f; шрифта: жирный;">
</ P>
<Div ID = "слайдер-диапазона макс"> </ DIV>
 
 
</ Body>
</ HTML>

Дальность полета с фиксированным минимумом

Минимальный фиксированный регулятор диапазона, пользователь может выбрать максимум. Установка range опция "мин".

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI Slider (слайдер) - диапазон с фиксированным минимумом </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "# Slider-диапазона мин") .slider ({
      Диапазон: "мин",
      Значение: 37,
      мин: 1,
      макс: 700,
      слайд: функция (событие, щ) {
        $ ( "#amount") .val ( "$" + Ui.value);
      }
    });
    $ ( "#amount") .val ( "$" + $ ( "# Slider-диапазона мин") .slider ( "значение"));
  });
  </ Script>
</ Head>
<Body>
 
<P>
  <Ярлык = "количество"> Максимальная цена: </ метка>
  <Тип входного = "Текст" ID = "количество" стиль = "границы: 0; цвет: # f6931f; шрифта: жирный;">
</ P>
 
<Div ID = "слайдер-диапазона мин"> </ DIV>
 
 
</ Body>
</ HTML>

Связанный, чтобы выбрать ползунок

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

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI Slider (слайдер) - обязан выбрать ползунок </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    вар выбора = $ ( "#minbeds");
    переменная слайдера = $ ( "<DIV ID = 'слайдер'> </ DIV>") .insertAfter (выберите) .slider ({
      мин: 1,
      макс: 6,
      Диапазон: "мин",
      Значение: выберите значение [0] .selectedIndex + 1,
      слайд: функция (событие, щ) {
        выберите [0] .selectedIndex = ui.value - 1;
      }
    });
    $ ( "#minbeds") .Кнопкой (Функция () {
      slider.slider ( "значение", this.selectedIndex + 1);
    });
  });
  </ Script>
</ Head>
<Body>
 
<Form ID = "оговорка">
  <Ярлык = "minbeds"> минимальное количество мест </ метка>
  <Выбрать Name = "minbeds" ID = "minbeds">
    <Option> 1 </ вариант>
    <Option> 2 </ вариант>
    <Option> 3 </ вариант>
    <Option> 4 </ вариант>
    <Option> 5 </ вариант>
    <Option> 6 </ вариант>
  </ Select>
</ Форма>
 
 
</ Body>
</ HTML>

Scrollbar слайдер

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

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI Slider (слайдер) - сдвиньте полосу прокрутки </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  .scroll-панель {переполнение: авто; ширина: 99%; с плавающей точкой: слева;}
  .scroll-контента {ширина: 2440px; флоат: слева;}
  .scroll-контент-элемент {ширина: 100px; высота: 100px; флоат: слева; поле: 10px; размер шрифта: 3em; высоту строки: 96 пикселей; выравнивания текста: центр;}
  .scroll-бар-обертка {ясно: левый; отступы: 0 4px 0 2px; маржа: 0 -1px -1px -1px;}
  .scroll-бар намотка .ui-слайдер {фон: нет; граница: 0; высота: 2em; маржа: 0 авто;}
  .scroll-бар-обертка .ui-ручка-хелперов-родитель {позиция: относительная; ширина: 100%; высота: 100%; маржа: 0 авто;}
  .scroll-бар-обертка .ui-слайдер-ручка {верх: .2em; высота: 1.5em;}
  .scroll-бар-обертка .ui-слайдер-ручка .ui-значок {поле: -8px авто 0; положение: относительная; верх: 50%;}
  </ Style>
  <Script>
  $ (Function () {
    // Свиток панель часть вар ScrollPane = $ ( ".scroll-стекло"),
      scrollContent = $ ( ".scroll-контент");
 
    // Создаем слайдер вар = $ полосы прокрутки ( ".scroll-бар") .slider ({
      слайд: функция (событие, щ) {
        если (scrollContent.width ()> scrollPane.width ()) {
          scrollContent.css ( "маржа налево", Math.round (
            ui.value / 100 * (scrollPane.width () - scrollContent.width ())
          ) + ", Рх");
        } Else {
          scrollContent.css ( "маржа налево", 0);
        }
      }
    });
 
    // Добавляет иконку для обработки Var handleHelper = scrollbar.find ( ".ui-слайдер ручка")
    .mousedown (функция () {
      scrollbar.width (handleHelper.width ());
    })
    .mouseup (функция () {
      scrollbar.width ( "100%");
    })
    .append ( "<SPAN класс = 'Пользовательский интерфейс-значок UI-значок-ручка-пунктир-вертикали"> </ SPAN> ")
    .wrap ( "<DIV класс = 'Пользовательский интерфейс-ручка-хелперов-родитель"> </ DIV> ") .parent ();
 
    // Поскольку ползунка прокрутки, изменить, чтобы скрыть переполнения часть scrollPane.css ( "переполнение", "скрытый");
 
    // В соответствии с расстоянием между скроллинг определяется отношением размера полосы прокрутки и функцию управления sizeScrollbar () {
      вар остаток = scrollContent.width () - scrollPane.width ();
      переменная доля = остаток / scrollContent.width ();
      вар handleSize = scrollPane.width () - (доля * scrollPane.width ());
      scrollbar.find ( ".ui-слайдер-ручка") .css ({
        ширина: handleSize,
        "Левое": -handleSize / 2
      });
      handleHelper.width ( "") .width (scrollbar.width () - handleSize);
    }
 
    // Content на основе позиции прокрутки, сбросить значение функции слайдера resetValue () {
      вар остаток = scrollPane.width () - scrollContent.width ();
      переменная leftVal = scrollContent.css ( "маржа налево") === "авто" 0 ?:
        ParseInt (scrollContent.css ( "маржа налево"));
      процент переменная = Math.round (leftVal / остаток * 100);
      scrollbar.slider ( "значение", в процентах);
    }
 
    // Если ползунок на 100%, а окно увеличивается, функция отображения reflowContent () {
        вар показ = scrollContent.width () + ParseInt (scrollContent.css ( "маржа налево"), 10);
        вар разрыв = scrollPane.width () - отображение;
        если (пробел> 0) {
          scrollContent.css ( "маржа налево", ParseInt (scrollContent.css ( "маржа налево"), 10) + пробел);
        }
    }
 
    // Изменение ручки, когда положение окна масштабирования $ (окно) .resize (функция () {
      resetValue ();
      sizeScrollbar ();
      reflowContent ();
    });
    // Инициализировать размер полосы прокрутки setTimeout (sizeScrollbar, 10); // сафари тайм-аут});
  </ Script>
</ Head>
<Body>
 
<Div класс = "прокрутки панели UI-виджет UI-виджет-заголовок пользовательский интерфейс угла всех">
  <Div класс = "прокрутки содержимого">
    <Div класс = "прокрутки контента элемента UI-виджета-заголовок"> 1 </ DIV>
    <Div класс = "прокрутки контента элемента UI-виджета-заголовок"> 2 </ DIV>
    <Div класс = "прокрутки контента элемента UI-виджета-заголовок"> 3 </ DIV>
    <Div класс = "прокрутки контента элемента UI-виджета-заголовок"> 4 </ DIV>
    <Div класс = "прокрутки контента элемента UI-виджета-заголовок"> 5 </ DIV>
    <Div класс = "прокрутки контента элемента UI-виджета-заголовок"> 6 </ DIV>
    <Div класс = "прокрутки контента элемента UI-виджета-заголовок"> 7 </ DIV>
    <Div класс = "прокрутки контента элемента UI-виджета-заголовок"> 8 </ DIV>
    <Div класс = "прокрутки контента элемента UI-виджета-заголовок"> 9 </ DIV>
    <Div класс = "прокрутки содержимого-элемента UI-виджета-заголовок"> 10 </ DIV>
    <Div класс = "прокрутки содержимого-элемента UI-виджета-заголовок"> 11 </ DIV>
    <Div класс = "прокрутки содержимого-элемента UI-виджета-заголовок"> 12 </ DIV>
    <Div класс = "прокрутки содержимого-элемента UI-виджета-заголовок"> 13 </ DIV>
    <Div класс = "прокрутки содержимого-элемента UI-виджета-заголовок"> 14 </ DIV>
    <Div класс = "прокрутки содержимого-элемента UI-виджета-заголовок"> 15 </ DIV>
    <Div класс = "прокрутки содержимого-элемента UI-виджета-заголовок"> 16 </ DIV>
    <Div класс = "прокрутки содержимого-элемента UI-виджета-заголовок"> 17 </ DIV>
    <Div класс = "прокрутки содержимого-элемента UI-виджета-заголовок"> 18 </ DIV>
    <Div класс = "прокрутки содержимого-элемента UI-виджета-заголовок"> 19 </ DIV>
    <Div класс = "прокрутки содержимого-элемента UI-виджета-заголовок"> 20 </ DIV>
  </ Div>
  <Div класс = "свитка-бар-обертка UI-виджет-контента UI-краеугольный снизу">
    <Div класс = "свитка-бар"> </ DIV>
  </ Div>
</ Div>
 
 
</ Body>
</ HTML>

Совместите приращение

На step опция устанавливается в целое ползунок , чтобы установить значение шага, как правило , максимальный слайдера делитель. По умолчанию приращение равно 1.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI Slider (слайдер) - выровнен инкрементный </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#slider") .slider ({
      Значение: 100,
      мин: 0,
      макс: 500,
      шаг: 50,
      слайд: функция (событие, щ) {
        $ ( "#amount") .val ( "$" + Ui.value);
      }
    });
    $ ( "#amount") .val ( "$" + $ ( "#slider") .slider ( "Value"));
  });
  </ Script>
</ Head>
<Body>
 
<P>
  <Ярлык = "суммы"> Сумма пожертвования ($ 50 приращения): </ метка>
  <Тип входного = "Текст" ID = "количество" стиль = "границы: 0; цвет: # f6931f; шрифта: жирный;">
</ P>
 
<Div ID = "слайдер"> </ DIV>
 
 
</ Body>
</ HTML>

слайдер Вертикальный диапазон

Изменение области в направлении, перпендикулярном к ползуну. По .height() присвоить значение высоты, или установить высоту с помощью CSS, и установить orientation опции для "вертикали".

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI Slider (слайдер) - слайдер вертикальный диапазон </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "# Slider-диапазон") .slider ({
      Ориентация: «вертикаль»,
      Диапазон: правда,
      значения: [17, 67],
      слайд: функция (событие, щ) {
        $ ( "#amount") .val ( "$" + Ui.values [0] + "- $" + ui.values [1]);
      }
    });
    $ ( "#amount") .val ( "$" + $ ( "# Slider-диапазон") .slider ( "ценности", 0) +
      "- $" + $ ( "# Slider-диапазон") .slider ( "ценности", 1));
  });
  </ Script>
</ Head>
<Body>
 
<P>
  <Метка для = "количество"> цели продаж (в миллионах): </ метка>
  <Тип входного = "Текст" ID = "количество" стиль = "границы: 0; цвет: # f6931f; шрифта: жирный;">
</ P>
 
<Div ID = "слайдер-диапазона" стиль = "высота: 250px;"> </ DIV>
 
 
</ Body>
</ HTML>

Вертикальный слайдер

Измените направление ползуна по вертикали. По .height() присвоить значение высоты, или установить высоту с помощью CSS, и установить orientation опции для "вертикали".

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI Slider (слайдер) - Вертикальный слайдер </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "# Slider-вертикаль") .slider ({
      Ориентация: «вертикаль»,
      Диапазон: "мин",
      мин: 0,
      макс: 100,
      Значение: 60,
      слайд: функция (событие, щ) {
        $ ( "#amount") .val (Ui.value);
      }
    });
    $ ( "#amount") .val ($ ( "# Slider-вертикаль") .slider ( "значение"));
  });
  </ Script>
</ Head>
<Body>
 
<P>
  <Ярлык = "количество"> Объем: </ метка>
  <Тип входного = "Текст" ID = "количество" стиль = "границы: 0; цвет: # f6931f; шрифта: жирный;">
</ P>
 
<Div ID = "слайдер-вертикальный" стиль = "высота: 200px;"> </ DIV>
 
 
</ Body>
</ HTML>