Задать вопрос
DimaLepel
@DimaLepel
javascript

Почему не работает noUiSlider?

Добрый вечер. Пытаюсь повторить пример из поста Как отфильровать контент с помощью isotope и noUiSlider?, но он почему-то не работает. Подключаю данный плагин с нуля в html - страницу:
<!DOCTYPE html>

<html lang="ru">

	<head>
		<meta charset = "utf-8" />
		
		<link href="nouislider.css" rel="stylesheet">
		<script type="text/javascript">
			$("#range-slider").noUiSlider({
	start: 40,
	range: {
		'min': 0,
		'max': 100
	}
});

		</script>
	
	
	</head>
	<body>
	<div id="range-slider"></div>
	<script src="https://yastatic.net/jquery/2.1.3/jquery.min.js"></script>
	<script src="nouislider.js"></script>
		
	</body>
</html>

отказывается работать. Что я делаю не так? Вроде не дурак, но что-то пошло не так. Помогите(
Можете помочь с этим примером https://jsfiddle.net/yurzui/y8w3zqL5/ ? Он в посте Как отфильровать контент с помощью isotope и noUiSlider? отмечен как решение, но зараза, на работает.
  • Вопрос задан
  • 3358 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
amux
@amux
alp.ac
1. Cначала подгружаем JQuery, потом использующий его скрипт скрипт
2. Используем $( document ).ready() чтоб все корректно грузилось.
3. Читаем документацию по плагину и используем.

Вот так работает:
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset = "utf-8" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/9.2.0/nouislider.css" rel="stylesheet">
  </head>
  <body>
  <div id="range-slider"></div>
  <script src="https://yastatic.net/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/9.2.0/nouislider.js"></script>
  <script type="text/javascript">
    $( document ).ready(function() {
      var slider = document.getElementById("range-slider");
      noUiSlider.create(slider,{
          start: 40,
          range: {
            'min': 0,
            'max': 100
          }
        });
    });
    </script>
  </body>
</html>
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 1
bootd
@bootd
Гугли и ты откроешь врата знаний!
А с чего вы решили, что этот плагин написан на jquery? Текущая версия написана на чистом js. Может в этом проблема?
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Создать инструмент для автоматической пересылки сообщений из закрытых
23 дек. 2024, в 20:10
5000 руб./за проект
Разработка скрипта для мониторинга транзакций на Solana
23 дек. 2024, в 19:45
150000 руб./за проект
Разработать чат-бота в Телеграм
23 дек. 2024, в 19:16
7000 руб./за проект
Ещё заказы