Value Sliders

Last Updated: January 15, 2013

Value Sliders are a way to visualize a number value-based input box. My control will dynamically show/hide when focus is in the text box. The two sample rows have identical value, min, max, and increment params. The bottom row has invert set to true which changes the low/high orientation.

The sliders are keyboard accessible. Increment or decrement each slider using the up/down arrows. I will add a logarithmic setting at some point for holding down the arrow.

Vertical sliders

inverted:


The options of the class can be set globally for all elements of class value-slider, but individual properties can be set declaratively on a per-control basis.

Here are the options you can set:

  • coords - Set on the class options only. The relative position to the textbox. Object must contain and x and y int value.
  • bgColor - Set on the class options only. A hex string for the slider background color.
  • imgDir - Set on the class options only. Location of image files used for the control.
  • increment - Float that represents the decimal precision between possible values. E.g., to only allow integers, set this to 1.To only allow multiples of 50, set to 50. For thousandths, set to .001, etc.
  • size - Integer size in pixels of the slidable distance of the slider bar.
  • minValue - Float value for lowest possible value.
  • maxValue - Float value for highest possible value.
  • sliderType - String ('horizontal' or 'vertical'). I only use one type of slider on a page. Horizontal sliders behave wacky if they are interchanged with vertical ones. It's on my TODO list :)

Here is the code to implement the first five.

<script>
	var sliders;
	$(function() {
		sliders = new WK.ValueSlider({bgColor:'#ccc'});
	});
</script>

Vertical sliders
<br>
<input class="value-slider" increment="10" 
	slidertype="vertical" slidersize="100" 
	maxvalue="100" minvalue="0" value="50">
<input class="value-slider" slidertype="vertical" 
	slidersize="150" maxvalue="100" minvalue="0" value="90">
<input class="value-slider" slidertype="vertical" 
	slidersize="100" maxvalue="100" minvalue="-100" value="-80">
<input class="value-slider" slidertype="vertical" 
	increment=".1" slidersize="100" 
	maxvalue="10" minvalue="1" value="5.5">
<input class="value-slider" slidertype="vertical" 
	increment=".01" slidersize="300" 
	maxvalue="3" minvalue="0" value=".01">
<input class="value-slider" slidertype="vertical" 
	increment="2000" slidersize="100" 
	maxvalue="10000" minvalue="0" value="2000">


Download a value slider demo you can play with.