Surebert Sliders

Surebert slider are widgets that allow you to adjust a value with a slider. They are based on sb.elements which are creating custom xml nodes. Sliders are styled with CSS. The mix and max values are mapped to the actual width of te element as set in the CSS.

The source code for surebert.sliders is in surebert.widgets.slider.js although it has ot fully been documented. The example below should be somewhat self explanatory. Surebert sliders are easy to instantiate and use. They run an custom onchangevalue handler any time the value is slid or the user clicks within the slidebar to change the value.

Properties And Methods

1. name: the title that displays
2. min: the min value at the far left
3. max: the max value at the far right
4. id: the id of the slider elements
5. defaultValue: the default value set when it instantiates
6. allowFloats: determines if float values can be returned
7. onchangevalue: this function fires anytime the value changes, references the slider value with this.value

//here I am getting a reference for the document body so that I don't have to keep referenicing it in the onchangevalue handler of the slider
//create slider
var info = $('#info');
var bri = new sb.slider({
	
	name : 'brightness',
	min : 0,
	max : 255,
	id : 'brightness',
	defaultValue : 100,
	allowFloats : 0,
	onchangevalue : function(){
		info.style.backgroundColor = 'rgb('+this.value+','+this.value+','+this.value+')';
		
	}
});

bri.appendTo('#brightnessHolder');