Подскажите на чем нарисовать такой элемент

[StrikeOFF]

Изображение условное. Оно не должно быть черным. В идеале это похоже на длинный input range. Но функционал input от него не нужен. Нужно только программно задавать объекты на отрезке, желательно без необходимости писать логику для рассчета на каком проценте отрезка ставить объект.

Типа такого:

$line = new Line;
$line->range(0, 60000);
$line->addObject(6700, 'arrow')->setDescription('6700');
$line->addObject(22000, 'pointer')->setDescription('Bus stop 1');
$line->addObject(35000, 'pointer')->setDescription('Bus stop 2');
$line->addObject(40000, 'pointer')->setDescription('Bus stop 3');

 

[Didi]

Если просто статический рисунок - можно на css. Типа так:
1) отрезок это div с "border" или задать ему высоту 2-3пикселя и дать background. Вообще можно даже и просто img поставить он вроде как статичный.
2) Элементы на отрезке можно расставить с помощью "position: absolute;".
3) Для изменения их положения при помощи PHP задаем горизонтальное положение элемента в css используя php в процентах или пикселях.
Имеется ввиду inline styling : <div style="left:35%;"></div>

4) Не забываем див контейнер относительно которого мы позиционируем внутренние элементы. (position: relative; )

 

[StrikeOFF]

Если просто статический рисунок - можно на css.

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

 

[Didi]

Ну библиотека будет наверно на Javascript, прийдется вам поискать и выбрать ту которая больше подходит.
Мне не приходились пользоваться так что незнаю.
Еще посоветую покопать в сторону SVG может вам такая опция будет интересна.

 

[ultra]

особо то и выбирать не из чего Для просмотра ссылки Войди или Зарегистрируйся
с небольшим допущением, можно сказать что html driven, а значит то, что нужно

на мой взгляд, использование библиотеки, да еще и js чуть менее чем избыточно, особенно, учитывая то, что взаимодействия пользователя со слайдером не предполагается, как я понял
как уже было сказано выше, вполне решается на css, элегантно - за вечер, другой, мне так думается

 

[itup]

Для просмотра ссылки Войди или Зарегистрируйся - как вариант

 

[d0ublezer0]

Думаю, что вот это может вам подойти
Для просмотра ссылки Войди или Зарегистрируйся

или это
Для просмотра ссылки Войди или Зарегистрируйся

гуглить по фразе
Для просмотра ссылки Войди или Зарегистрируйся

Ну или вот вам решение самостоятельное, без библиотек, только что накидал:
Для просмотра ссылки Войди или Зарегистрируйся

Начало и конец линии отсчета задавайте через параметры data-start и data-end, значения позиций - через data-value