JRange

Simple-slider.js is a lightweight pure javascript slider.

Vertical and Horizontal orientations
Pure Javascript, no dependencies
Supports touch motion
Easy very flexible css styling

Version

1.0.0

Installation

Simply include simple-slider.js at the end of your project, just before the closing body tag.

...
<script type="text/javascript" src="js/cdlm-slider.js"></script>
</body>

Usage

Instantiate the simple_slider class and add the config parameters

@param (string)targ - Element target where the slider is to be installed. Use . or # to target class or id identifier respectively (class target installs on first ocurrence of class element).
@param (int)max_val - Slider max
@param (int)init_val - Value where slider starts
@param (string)write_to - (option) write slider current value onto (hereby) specified element
@param (bool)verbose - (option) true to output slider current value to console log.
@param (string)orient - "vertical" or "horizontal" for vertical or horizontal slider mode. NOTE: match css styling to cohere with mode see styling.

...
<script type="text/javascript" src="js/cdlm-slider.js"></script>
<script type="text/javascript">
	var vsl = new cdlm_slider({	
								targ: '#any-div',
								max_val: 500,
								init_val: 0,
								write_to: '#any-div',
								verbose: false,
								orient: 'vertical'
							});
</script>
</body>

Styling

Simple Slider adapts to pretty much any css styling. NOTE: style widths and heights coherently to match slider vertical and horizontal modes: Use larger track height than track width for vertical mode, and larger track width that track height for horizontal mode.

Stylable components:

#cdlm-slider-track - Track space for slider thumb
#cdlm-slider-track-upper - Element div representing value of slider, increases and decreases with value on top of thumb (only in supported in vertical mode)
#cdlm-slider-track-lower - Not supported yet
#cdlm-slider-thumb - Thumb of the slider

Development

Ask for pull requests!

Todo's

Refactor slider class
Add lower track styling support
Force relative position for thumb, so always clickable
Add left and right track styling support for horizontal mode
Add height/width proportion check to trigger error when css style does not match slider mode

License

MIT

cdleon / jrange