Как сделать картинку с ползунком?

Question

[Daniel_Defo]

Добрый день имеется блок, на котором нужно реализовать, вот какие эффекты, Имеется картинка и рядом ползунок +-, нужно при перетаскивании шкалы, увеличивать или уменьшать картинку и второй момент, чтобы можно было мышкой перетаскивать картинку(то есть как яндекс и google карты). Не претендую на готовое решение, просто интересуюсь, может кто сталкивался с такой задачей и знает решение или библиотеку. С уважением, чести и удачи!

Comments

[reaget]

Вы каким образом рисуете места?

[Daniel_Defo]

reaget, это просто картинка, то есть просто нужно ее увеличивать и перемещать мышкой как карту, данные о местах заполняются в форму

[reaget]

Daniel_Defo, Вы можете нарисовать картинку на canvas. После чего увеличивать изображение канваса и соответственно передвигаться по нему.
Нужен будет пример кода, предоставлю :)

[Daniel_Defo]

reaget, с canvas пока не дружу, но задумка интересная( на счет примера кода: он платный? ), там суть в том, что человек хочет сам менять картинку(не думаю что он разбирается в canvas)

[reaget]

Daniel_Defo, нет, не платный. А ему и не надо разбираться в canvas. Всё, что ему нужно сделать, это указать ссылку на картинку.

[Daniel_Defo]

reaget, если вас не затруднит я бы хотел посидеть покапаться в вашем коде, это очень интересно

[reaget]

https://jsfiddle.net/okdn242e/

[Daniel_Defo]

reaget, благодарю!

Answer 1

[Андрей Федоров]

https://codepen.io/aliencash/pen/MOQyJg

Comments

[Daniel_Defo]

вот только ползунок не увеличивает изображение

[Андрей Федоров]

Daniel_Defo, А не надо устаревшими браузерами пользоваться.

[Daniel_Defo]

Андрей Федоров, Андрей а браузеры обновленные, не знаю что не так)

[Андрей Федоров]

Daniel_Defo, только что проверил - за исключением ie/edge везде работает, даже в сафари.

Answer 2

[Виктор Янышев]

Думаю понадобится:
overlflow:hidden
drag & drop
width: %;