HOME   SITEMAP   CONTACT   NEWS   BLOG
Search
 Home / JavaScript / Slider Control


JavaScript JavaScript Slider Control


The slidebar is written in pure dhtml/javascript and works without installation of any plugins, java etc.

Screenshots:

dhtml slider with colorbar feature   misc html sliders   vertical slider
 
horizontal slider skins
 
vertical slider skins

Features:

  • Use premade skins or your own images/colors, specify size etc
  • Set min-value, max-value, default-value, step-value (if you go 1 - 2 - 3 or 1 - 1.5 - 2 ... whatever)
  • User can change the value in 6 ways:
    1. slide
    2. click arrow left/right
    3. click somewhere into the slider
    4. enter a value into the field
    5. use an api function to set a value
    6. use your mouse wheel (internet explorer only)
  • Attach onChanges event etc
  • Can be directly used as form field. See the Bs_Form package.
  • Horizontal and vertical slider (vertical since bs-4.6)
  • Slider with two knobs (since 2005-02-21)
  • ... many api functions
It's a great thing to have the user input a special kind of data. It's often used in software, but rarely on the internet because web browsers don't come with such a control.

If a browser does not support it or has javascript turned off, it can be hacked so they can still enter some data (but not as nicely).

Requirements:

  • Mac: Safari and Camino work fine. Internet Explorer (5.2.3) works but does not submit the value along with a form. If you need that feature, make a (hidden) form field and attach an onchange event to the slider, just like in example 1. It's a problem from Explorer, not from the javascript code, and the development of Internet Explorer on Mac has been abandoned.

DocType

Not all doctypes work. This one does:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
For example don't use "XHTML 1.0".
If this is a problem with your current setup, you can stick the slider into an iframe.

Examples:


Compatibility:

Browser List

5.0+
   MS Internet Explorer
5.1+
   MS IE on Mac
issues with the checkbox system
1.0+
   Gecko (Firefox etc)
?
   Safari, Konqueror
untested
7.11+
   Opera

Rate me:

Scripts.com Rate Script!


Documentation:


Download:

This component ships with the full "BlueShoes Framework" package, the "BlueShoes JavaScript" package and the "BlueShoes JavaScript Slider" package. See the download page.


License:

Available with Check the license overview page for details.


Let us know

Have you done something interesting with BlueShoes or one of its components?