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

Тема в разделе "Верстка", создана пользователем StrikeOFF, 16 апр 2019.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. StrikeOFF

    StrikeOFF ♥kan inte lyfta utan lift♥

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

    Типа такого:
    PHP:
    $line = new Line;
    $line->range(060000);
    $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');
    [​IMG]
     
    Последнее редактирование: 16 апр 2019
  2. Didi

    Didi Постоялец

    Регистр.:
    16 окт 2013
    Сообщения:
    64
    Симпатии:
    29
    Если просто статический рисунок - можно на 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 нравится это.
  3. StrikeOFF

    StrikeOFF ♥kan inte lyfta utan lift♥

    Регистр.:
    20 мар 2010
    Сообщения:
    373
    Симпатии:
    204
    Хотелось бы не рисунок, а библиотеку типа как библиотека для рисования диаграмм. Но вариант уже допустимый.
     
  4. Didi

    Didi Постоялец

    Регистр.:
    16 окт 2013
    Сообщения:
    64
    Симпатии:
    29
    Ну библиотека будет наверно на Javascript, прийдется вам поискать и выбрать ту которая больше подходит.
    Мне не приходились пользоваться так что незнаю.
    Еще посоветую покопать в сторону SVG может вам такая опция будет интересна.
     
  5. ultra

    ultra

    Moderator
    Регистр.:
    15 ноя 2011
    Сообщения:
    237
    Симпатии:
    379
    особо то и выбирать не из чего https://github.com/leongersen/noUiSlider
    с небольшим допущением, можно сказать что html driven, а значит то, что нужно
    [​IMG]

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

    itup Постоялец

    Регистр.:
    8 окт 2007
    Сообщения:
    79
    Симпатии:
    50
  7. d0ublezer0

    d0ublezer0

    Регистр.:
    21 май 2009
    Сообщения:
    304
    Симпатии:
    168
    Думаю, что вот это может вам подойти
    https://github.com/gre/multi-slider

    или это
    http://embed.plnkr.co/XJyMrxVgFixCKkUnwUTA/preview

    гуглить по фразе
    multiple values slider js

    Ну или вот вам решение самостоятельное, без библиотек, только что накидал:
    https://jsfiddle.net/d0ublezer0/9vyn3rzu/16/

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