Ползунки на JS, псевдоклассы для окошек вывода значения и поиск элементов

Привет! Не совсем понятно, как сделать следующую вещь: делаю слайдер-ползунки на JS. Для окошек использовал псевдоэлементы .price span::before, .price span::after. Но чтобы в них выводились значения, нужно как-то привязать. В примере, по которому я делаю слайдер, окошки ищутся так: getElementById(’…’). У меня же окошко - это класс+тег+псевдокласс. Как его отыскать с помощью JS? Или всё же нужно сделать 2 блока, а не псевдоклассами, присвоить им id и писать document.getElementsById и только так?
И ещё, нужно, чтобы над этим слайдером было: 100 руб. - 500 руб. В примере используется
format: {
to: function ( value ) {
return value + ’ руб. -’;
},
from: function ( value ) {
return value.replace(’,-’);
}
}
Всё хорошо, только после 500 руб. тоже ставится “-”, а мне это не нужно. Как подкорректировать этот format?

В первом вопросе вы скорее всего везде имеете в виду “псевдоэлементы”. Управлять ими с помощью JS нельзя. Именно потому что эти элементы ненастоящие) Обходных путей тоже нет.
Чтобы ответить на второй вопрос, мне нужен код примера целиком.

Нет, всё-таки есть что-то. Но я не знаю, как правильно писать: http://javascript.ru/forum/misc/27056-psevdoehlementy-i-javascript.html

Ах, вот где это “псевдо” вылазит :slight_smile: Значит, будет 2 div, которым присвою id и буду управлять ими ) Код примера, как обычно, в песочнице - я не трогал его, там без “руб.” Правда, он чуть “калечный” - полоса не окрашена. Но мне это неважно, в странице, туда, где я его делаю, он работает в этом плане нормально. https://thimbleprojects.org/alessio18911/285176

Спасибо! Но всё же ограничусь вариантом попроще - через настоящие элементы - слишком сложно :slight_smile:

1 лайк

Или тоже не усложнять и просто заменить в коде JS на “руб.” без пробелов, а между окошками в HTML доставить пробелы и длинное тире спецсимволами?

Такой вариант тоже возможен. Но я попробую поиграться еще)

Будет очень интересно узнать итог Вашей игры! К сожалению, для самого пока такие игры - это дремучий лес. То, что я делаю сейчас, - это подключить библиотеки и сделать по примеру, заменив пару переменных (((

Вы сами нашли этот плагин или это рекомендованное?
Для меня изменение кода плагина - это тоже пока тяжело.
Чужой js-код с трудом разбираю. Здесь, к сожалению не смогу разобраться…)

Я нашёл сайт, посвящённый таким слайдерам. Даже не имея фактически никаких представлений о JS, я смог сделать рабочий ползунок! Не страшно, значит, я ограничусь спецсимволами: думаю, тоже неплохо будет)

Поделитесь с сообществом. Здесь или в теме полезных ссылок и материалов.

А что, стоит? У меня была такая мысль. Но я не знаю, насколько ценны такие вещи для остальных - может, это всё давно известно для большинства и нет смысла засорять форум! )

Любая новая для нас информация может стать полезной для кого-то еще) Пусть будет.

https://refreshless.com/nouislider/