アマゾンにあるイメージスライダーの実装の考え方について

Question

添付させて頂きました動画は
アマゾンのイメージスライダーです。
https://www.youtube.com/watch?v=L_7VHoatO4E&feature=youtu.be

画像の下に表示されるバーをドラッグすることにより
画像をスライドさせているのですが、回答者様でしたら
どのように実装されますでしょうか。
実際のコードではなく、考え方のみで構いませんので、
ご教授頂けますと幸いです。

一応、私なりに作成してみました。
https://jsfiddle.net/ghost7492/q8u4jg3c/

私は、バー要素に対してhtml5のdraggableを指定し、
ドラッグ開始時に開始点となるx座標を保存。
ドラッグ中は、マウスの移動距離と上で求めたx座標を用いて
移動距離を算出。それを要素のstyleのpositionに適用。
バーと画像をスライドさせております。
基本的な考え方は、このような形で大丈夫でしょうか。

Comments

[m.ts10806]

外部サービスを利用してコードを載せられる場合は、念のため質問本文にも添付してください（文字数の関係もあるので可能な限りで結構です）何かでその外部サービスが利用できなくなったときにコードが確認できなくなるためです。ご面倒かと思いますが、よろしくお願いします。

[fjaiofjawiefjaw]

確かにおっしゃる通りです。諸事情により、後で修正いたします。

Answer 1

もし、先輩に質問をし、無視をされた場合、
先輩の興味のない質問だったと推測できます。

この質問内容に特に問題がなかったと推測できます。
よって、問題なしとみなし、自己解決といたします。