resizable image/DIV with jQuery plus number

[ACTIONpack]

I'm looking for a which will most likely be in jQuery, that I can slide a maker and an image or DIV would get bigger. Also when you slide to the right it will should the inch size on the image too. Is there a link where I can find out how to do it. Not really good at jQuery. The image below is how it would look like. It's really simple.

 

 

 

 

[Seahorsepip Veteran]

You can use the html5 range element: http://developerdrive.com/demo/slider_control/demo.html

And use jquery ui as fallback for IE.

 

Edit: since the tutorial link on the demo page has a mistake in it, here's the tutorial http://www.developerdrive.com/2012/07/creating-a-slider-control-with-the-html5-range-input/

[+Kyle Subscriber¹]

http://jsfiddle.net/PrLv9/2/

 

something like that?

 

credit to john s at stack overflow for that, btw.

[Seahorsepip Veteran]

http://jsfiddle.net/PrLv9/2/

 

something like that?

 

credit to john s at stack overflow for that, btw.

Requires jquery ui and such which might be a bother :/

[ACTIONpack]

As long as it can be simple for me to do then I'm okay.

[Seahorsepip Veteran]

As long as it can be simple for me to do then I'm okay.

Simplest thing is range element but it's sad thing is that it's html5 only :/

[ACTIONpack]

Is there a way to change the % to inches?

You can use the html5 range element: http://developerdrive.com/demo/slider_control/demo.html

And use jquery ui as fallback for IE.

 

Edit: since the tutorial link on the demo page has a mistake in it, here's the tutorial http://www.developerdrive.com/2012/07/creating-a-slider-control-with-the-html5-range-input/

[Seahorsepip Veteran]

Is there a way to change the % to inches?

Value is just a value so you can set max value to example 10 and put instead of the 5% and 200% text some other text like 0 inch and 10 inch.

So the range element doesn't actually depend on inch, it's just a numeric value from 0 to maxvalue with also a step (as example step 5 gives the following values on dragging: 0 5 10 15 20 25 etc).

 

The js itself to apply the range element value to the picture uses percentages but you could also use pixels if you'd rather use that or actual inches (see: http://www.w3schools.com/cssref/css_units.asp) as exampel for 7 inch you use "7in" ;)