How to make CSS scroll panel for custom purposes?

Tags: javascript,jquery,html,css

Problem :

I want to create scrolling panel for custom use - re-sizing some elements. So, it will be like this: the slider is moved, I pick its position and apply it to desired element. My best guess is using something like this:

<div style="width:300px !important;height:40px;overflow-x:scroll"></div>

However, in this approach div must be filled with data, otherwise there's no slider on the panel. In addition to that, I'm not quite sure to to pick up data from such kind of panel using JS/JQuery.

Can you give me some advice on how to make a simple scrollable panel,so that I could pick up the slider position with JS/JQuery?

This question may seem obvious, but I'm newbie in such complex html/css elements

Solution :

jQueryUI has its own Slider plugin. Perhaps it's what you're looking for.

    CSS Howto..

    How to override height

    how to add multiple images to a css header?

    How to animate CSS with a delay between an unknown number of elements [duplicate]

    How to set CSS class file to a Menu item control

    How to maintain the background image until end of the page

    css show separator icon for icons

    How do I move all the li elements with specific css style to another ul?

    How to remove a CSS style on the fly

    How to find the highest z-index using jQuery

    How can I 'page zoom' on mobile browser

    how do you modify the actual css of a class rather than add a style to each element of that class? [duplicate]

    how to get image to show up to the left of panel (both in same row)

    How to create custom shapes with pseudo classes in CSS3

    How i can force my div to display in block?

    How can I nullify css property?

    How do I put a border: 1px solid #ddd around a selectbox using jQuery?

    How to center a rotated div inside a table element with a specific width?

    How to set z-index in css background

    How to change style of a table in a chrome extension?

    CSS how to select first occuring element after another element

    How to create image curved using css or jquery (See picture)

    How can I use the key name instead of value in map-get?

    Buttons on bootstrap timepicker is not showing

    How can I make a circle using css and apply it to my header?

    How can I get the second child using CSS?

    How to make circles repeat in the background of an element in full CSS?

    CSS animation - How to fill in “starting from border”?

    How to make css layout to fit html content?

    How to swap two button elements using float in CSS

    How can I apply a custom css rule to small helping arrows that appears on column reordering in Kendo UI grid