Jquery Timeline range control (like Flash, Storyline, Recording Software)


myRangeSlider Jquery Plugin
A horizontally or vertically Timeline Range Slider.


myRangeSlider

These type of range sliders can be found in timeline animation programs like Flash and Storyline. Range Slider are also used extensively in audio recording programs to display audio wave form ranges on music tracks and as normal mixing sliders.

The jquery plugin code is as minimal as I could get it.
You will need to add your own functions and routines.

Why? I was building an HTML animation timeline that looked and performed exactly like the one found in the Adobe Flash editor. I was used nouiSlider as my control but found it extremely difficult to perform simple tasks like change the handle’s color on mousedown event. The next range slider I used was JQslider which I also abandoned because it used jQuery UI (I prefer to be in total control of my code).

Code break down (Top Section):

Code to init on HTML page:

$(document).ready(function () {
$('#Slider1').myRangeSlider({
  HORIZ: true,
  BtnWH: 60,
  LowerRange: '#LowerH',
  UpperRange: '#UpperH' });
});

<body>
    
id="Slider1">
class="Hhandle">H
</div>
id="LowerH">0
id="UpperH">0
</body>

1. Place a DIV on page and give it an ID “e.g. Slider1”.
2. Add a second DIV with the class “Hhandle” (horitontal) or “Vhandle” (vertical)

Rounded.css controls all positioning and styles.
Clean.css is the same without the fancy look.

The $().myRangeSlider parameters:

HORIZ: true (default) the slide is horizontal in design, false for vertical

BtnWH: number (20 default) the minimum width the drag handle (button) can be sized to. Going lower than 20 will have the button edges overlap or disappear.

LowerRange: string (“” default) name of a DIV that will receive lower range value as jquery HTML().

UpperRange: string (“” default) name of a DIV that will receive upper range value as jquery HTML().

Take Note: All dragging and sliding of the handle is executed in the
var Drag = function(e,MouseXY) { code… }
Everything after the Drag function code is just mouse events for desktop and touch events.
You should not have to change anything after the Drag function().

The CSS.
It is very important to look at the ‘!important’ flags in the css file.
MyRangeFinder is pixel perfect. However, bugs in different versions of jQuery plus lots of bugs in browsers  make it almost impossible to get the exact width or height of elements that have borders, padding and/or margins.

If you exceed the clamp values by only a pixel (e.g. adding a border) then strange effects are produced.  Exceeding the right edge by just a pixel will have the handle move in unexpected ways. I played with changing width() to InnerWisth, OuterWidth(), Position(), offset(). I gave up, so best not to add borders and such. Use insert box shadows to fake borders or use before:after css.

Tip: Just need it to be just a slider?  add  display: none to *[class^=’edge’] in the css.

View Demo:
http://RobbieStewart.ca/myRangeSlider/myRangeSlider.html

Zip file with code:
http://RobbieStewart.ca/myRangeSlider/myRangeSlider.zip

Robbie
Thank you.

Advertisements

About torontographic

looking for work since 2009
This entry was posted in html5, jQuery mouseSwipe and tagged , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s