jSlider: from listbox to slider

From listbox to slider with image

Muted Low Medium High

This is the HTML code of the listbox (NOTE: the code of images is in the rel parameter)

<select id='volume' >
	<option value="muted" rel="<img src='img/volume-muted.png' />" >Muted</option>
	<option value="low" rel="<img src='img/volume-low.png' />" selected >Low</option>
	<option value="medium" rel="<img src='img/volume-medium.png' />" >Medium</option>
	<option value="high" rel="<img src='img/volume-high.png' />" >High</option>
</select>

This is the javascript code of the listbox with images and slider attached

$().ready(function() {
	$("#volume").jSlider({useRel: true});
});

From listbox to slider

Danger: Very low Low Medium High Very hight

This is the HTML code of the listbox

<select id='sele'>
<option value='1'>Very low</option>
<option value='2'>Low</option>
<option value='5' selected>Medium</option>
<option value='6'>High</option>
<option value='9'>Very hight</option>
</select>

This is the javascript code of the listbox with slider attached

$().ready(function() {
	$("#sele").jSlider({
		colorSlider: "#90D5DA",
		colorPointer: "#70B5BA",
		colorMSTooltip: "#10959A",
		colorMS: "yellow",
		dimXSlider: 600,
		dimYSlider: 8,
		dimXPointer: 18,
		dimYPointer: 18
	});
});

From listbox to slider with formatted text

Various: Red text Bold text Italic text Various text Green Small

This is the HTML code of the listbox with images

<select id="test" >
	<option value="1" rel="<font color=red>Red test</font>">Red text</option>
	<option value="2" rel="<b>Bold test</b>">Bold text</option>
	<option value="3" rel="<i>Italic test</i>">Italic text</option>
	<option value="4" rel="Various <b>bold</b> <i>italic</i> <u>underline</u>">Various text</option>
	<option value="5" rel="<font color=green>Green test</font>">Green</option>
	<option value="6" rel="<small>Small test</small>">Small</option>
</select>

This is the javascript code of the listbox with slider attached

	$("#test").jSlider({
		colorSlider: "#D0D5DA",
		colorPointer: "#B0B5BA",
		colorMSTooltip: "#90959A",
		colorMS: "blue",
		dimXSlider: 500,
		dimYSlider: 7,
		dimXPointer: 18,
		dimYPointer: 18,
		useRel: true
});

From listbox to slider with images

Lang: Italiano English Français Deutch

This is the HTML code of the listbox with images

<select id='lang' >
	<option value="Italiano" rel="<img src='img/ita.gif' />" selected > Italiano</option>
	<option value="English" rel="<img src='img/eng.gif' />" > English</option>
	<option value="Français" rel="<img src='img/fra.gif' />" > Français</option>
	<option value="Deutch" rel="<img src='img/deu.gif' />" > Deutch</option>
</select>

This is the javascript code of the listbox with slider attached

	$("#lang").jSlider({useRel: true});

From listbox to slider with colored div

Colors: #100 #200 #300 #400 #500 #600 #700 #800 #900 #A00 #B00 #C00 #D00 #E00 #F00

This is the HTML code of the listbox with colored div

<select id='colors' >
	<option value="100" rel="<div style='width: 30px; height: 10px; background-color: #100;'> </div>" > #100 </option>
	<option value="200" rel="<div style='width: 30px; height: 10px; background-color: #200;'> </div>" > #200 </option>
	<option value="300" rel="<div style='width: 30px; height: 10px; background-color: #300;'> </div>" > #300 </option>
	<option value="400" rel="<div style='width: 30px; height: 10px; background-color: #400;'> </div>" > #400 </option>
	<option value="500" rel="<div style='width: 30px; height: 10px; background-color: #500;'> </div>" > #500 </option>
	<option value="600" rel="<div style='width: 30px; height: 10px; background-color: #600;'> </div>" > #600 </option>
	<option value="700" rel="<div style='width: 30px; height: 10px; background-color: #700;'> </div>" > #700 </option>
	<option value="800" rel="<div style='width: 30px; height: 10px; background-color: #800;'> </div>" > #800 </option>
	<option value="900" rel="<div style='width: 30px; height: 10px; background-color: #900;'> </div>" > #900 </option>
	<option value="A00" rel="<div style='width: 30px; height: 10px; background-color: #A00;'> </div>" > #A00 </option>
	<option value="B00" rel="<div style='width: 30px; height: 10px; background-color: #B00;'> </div>" selected > #B00 </option>
	<option value="C00" rel="<div style='width: 30px; height: 10px; background-color: #C00;'> </div>" > #C00 </option>
	<option value="D00" rel="<div style='width: 30px; height: 10px; background-color: #D00;'> </div>" > #D00 </option>
	<option value="E00" rel="<div style='width: 30px; height: 10px; background-color: #E00;'> </div>" > #E00 </option>
	<option value="F00" rel="<div style='width: 30px; height: 10px; background-color: #F00;'> </div>" > #F00 </option>
</select>

This is the javascript code of the listbox with slider attached

	$("#colors").jSlider({useRel: true});