$(function(){
	/*
	 * Function to create a range slider on an element specified by a selector
	 */
	createRange = function(selector) {
		/*
		 * Store the placeholder (no need to keep traversing the DOM)
		 */
		var placeholder = $(selector);

		/*
		 * Setup the range input (uses jQuery tools)
		 */
		var range = placeholder.rangeinput({
			speed: 0,
			progress: true,
			onSlide: function(ev, step){
				$('.position', range.parent()).css({left: ev.target.offsetLeft}).html(step);
			},
			change: function(ev, value){
				var conf = $(range).data('rangeinput').getConf();
				var left = Math.floor((value-conf.min) / (conf.max-conf.min) * 406);
				$('.position', range.parent()).css({left: left}).html(value);
			}
		});

		/*
		 * After initializing the slider, give .position the default value
		 */
		var conf = $(range).data('rangeinput').getConf();
		var value = $(placeholder).val();
		var left = Math.floor((value-conf.min) / (conf.max-conf.min) * 406);
		$('.position', range.parent()).css({left: left}).html(value);
	};

	createRange('#sms');
	createRange('#min');
});