The JavaScript Source: Forms : Carpe Slider

General

This slider is a good alternative to the text input tag, when the expected value is limited to a certain interval and/or when only a limited number of values in the interval are allowed. This cross-browser slider does not contain any image elements or applets. Adding a slider is as easy as adding an HTML element. Settings are easy to modify with a few attributes of the slider element.

Notes

Created by: Tom Hermansson Snickars
Web Site: http://carpe.ambiprospect.com/
Posted: January 12, 2006

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: carpeSlider.js

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Tom Hermansson Snickars | http://carpe.ambiprospect.com/ */
//------------------------------------------+
//  CARPE  S l i d e r  v. 1.5  2006-01-03  |
//  By Tom Hermansson Snickars              |
//  Copyright CARPE Design                  |
//  http://carpe.ambiprospect.com/          |
//------------------------------------------+

var carpeDefaultSliderLength      = 100
var carpeSliderDefaultOrientation = 'horizontal'
var carpeSliderClassName          = 'carpe_slider'
var carpeSliderDisplayClassName   = 'carpe_slider_display'

function carpeGetElementsByClass(className) {
  var classElements = new Array()
  var els = document.getElementsByTagName("*")
  var elsLen = els.length
  var pattern = new RegExp("\\b" + className + "\\b")
  for (i = 0, j = 0; i < elsLen; i++) {
    if ( pattern.test(els[i].className) ) {
      classElements[j] = els[i]
      j++
    }
  }
  return classElements;
}

function carpeLeft(elmnt, pos) {
  if (!(elmnt = document.getElementById(elmnt))) return 0;
  if (elmnt.style && (typeof(elmnt.style.left) == 'string')) {
    if (typeof(pos) == 'number') elmnt.style.left = pos + 'px';
    else {
      pos = parseInt(elmnt.style.left);
      if (isNaN(pos)) pos = 0;
    }
  } else if (elmnt.style && elmnt.style.pixelLeft) {
    if (typeof(pos) == 'number') elmnt.style.pixelLeft = pos;
    else pos = elmnt.style.pixelLeft;
  }
  return pos;
}

function carpeTop(elmnt, pos) {
  if (!(elmnt = document.getElementById(elmnt))) return 0;
  if (elmnt.style && (typeof(elmnt.style.top) == 'string')) {
    if (typeof(pos) == 'number') elmnt.style.top = pos + 'px';
    else {
      pos = parseInt(elmnt.style.top);
      if (isNaN(pos)) pos = 0;
    }
  } else if (elmnt.style && elmnt.style.pixelTop) {
    if (typeof(pos) == 'number') elmnt.style.pixelTop = pos;
    else pos = elmnt.style.pixelTop;
  }
  return pos;
}

function moveSlider(evnt) {
  var evnt = (!evnt) ? window.event : evnt;
  if (mouseover) {
    x = slider.startOffsetX + evnt.screenX
    y = slider.startOffsetY + evnt.screenY
    if (x > slider.xMax) x = slider.xMax
    if (x < 0) x = 0
    if (y > slider.yMax) y = slider.yMax
    if (y < 0) y = 0
    carpeLeft(slider.id, x)
    carpeTop(slider.id, y)
    sliderVal = x + y
    sliderPos = (slider.distance / display.valuecount) *
      Math.round(display.valuecount * sliderVal / slider.distance)
    v = Math.round((sliderPos * slider.scale + slider.from) *
      Math.pow(10, display.decimals)) / Math.pow(10, display.decimals)
    display.value = v
    return false
  }
  return
}

function slide(evnt) {
  if (!evnt) evnt = window.event;
  slider = (evnt.target) ? evnt.target : evnt.srcElement;
  dist = parseInt(slider.getAttribute('distance'))
  slider.distance = dist ? dist : carpeDefaultSliderLength
  ori = slider.getAttribute('orientation')
  orientation = ((ori == 'horizontal') || (ori == 'vertical')) ? ori : carpeSliderDefaultOrientation
  displayId = slider.getAttribute('display')
  display = document.getElementById(displayId)
  display.sliderId = slider.id
  dec = parseInt(display.getAttribute('decimals'))
  display.decimals = dec ? dec : 0
  val = parseInt(display.getAttribute('valuecount'))
  display.valuecount = val ? val : slider.distance + 1
  from = parseFloat(display.getAttribute('from'))
  from = from ? from : 0
  to = parseFloat(display.getAttribute('to'))
  to = to ? to : slider.distance
  slider.scale = (to - from) / slider.distance
  if (orientation == 'vertical') {
    slider.from = to
    slider.xMax = 0
    slider.yMax = slider.distance
    slider.scale = -slider.scale
  } else {
    slider.from = from
    slider.xMax = slider.distance
    slider.yMax = 0
  }
  slider.startOffsetX = carpeLeft(slider.id) - evnt.screenX
  slider.startOffsetY = carpeTop(slider.id) - evnt.screenY
  mouseover = true
  document.onmousemove = moveSlider
  document.onmouseup = sliderMouseUp
  return false
}

function sliderMouseUp() {
  if (mouseover) {
    v = (display.value) ? display.value : 0
    pos = (v - slider.from)/(slider.scale)
    if (slider.yMax == 0) {
      pos = (pos > slider.xMax) ? slider.xMax : pos
      pos = (pos < 0) ? 0 : pos
      carpeLeft(slider.id, pos)
    }
    if (slider.xMax == 0) {
      pos = (pos > slider.yMax) ? slider.yMax : pos
      pos = (pos < 0) ? 0 : pos
      carpeTop(slider.id, pos)
    }
    if (document.removeEventListener) {
      document.removeEventListener('mousemove', moveSlider, false)
      document.removeEventListener('mouseup', sliderMouseUp, false)
    }
    else if (document.detachEvent) {
      document.detachEvent('onmousemove', moveSlider)
      document.detachEvent('onmouseup', sliderMouseUp)
    }
  }
  mouseover = false
}

function focusDisplay(evnt) {
  if (!evnt) evnt = window.event;
  display = (evnt.target) ? evnt.target : evnt.srcElement;
  lock = display.getAttribute('typelock')
  if (lock == 'on') {
    display.blur()
  }
  return
}

window.onload = function() {
  sliders = carpeGetElementsByClass(carpeSliderClassName)
  for (i = 0; i < sliders.length; i++) {
    sliders[i].onmousedown = slide
  }
  displays = carpeGetElementsByClass(carpeSliderDisplayClassName)
  for (i = 0; i < displays.length; i++) {
    displays[i].onfocus = focusDisplay
  }
}

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

/* Default stylesheet for the Carpe Slider
  By Tom Hermansson Snickars
  2005-12-17 version 1.5
  Copyright CARPE Design
  carpe.ambiprospect.com */

*.carpe_horizontal_slider_display_combo {
  clear: left;
  margin: 0;
}
*.carpe_vertical_slider_display_combo {
  float: left;
  margin: 0;
}
*.carpe_horizontal_slider_track {
  background-color: #bbb;
  color: #333;
  width: 120px;
  float: left;
  margin: 0;
  line-height: 0px;
  font-size: 0px;
  text-align: left;
  padding: 4px;
  border: 1px solid;
  border-color: #ddd #999 #999 #ddd;
}
*.carpe_vertical_slider_track {
  background-color: #bbb;
  color: #333;
  padding: 3px 6px 15px 6px;
  width: 24px;
  height: 100px;
  border: 1px solid;
  border-color: #ddd #999 #999 #ddd;
}
*.carpe_horizontal_slider_track *.carpe_slider_slit {
  background-color: #333;
  color: #ccc;
  width: 110px;
  height: 2px;
  margin: 4px 4px 2px 4px;
  line-height: 0px;
  position: absolute;
  z-index: 1;
  border: 1px solid;
  border-color: #999 #ddd #ddd #999;
}
*.carpe_vertical_slider_track *.carpe_slider_slit {
  background-color: #000;
  color: #333;
  width: 2px;
  height: 100px;
  position: absolute;
  margin: 4px 10px 4px 10px;
  padding: 4px 0 1px 0;
  line-height: 0px;
  font-size: 0;
  border: 1px solid;
  border-color: #666 #ccc #ccc #666;
}
*.carpe_horizontal_slider_track *.carpe_slider {
  width: 16px;
  background-color: #666;
  color: #333;
  position: relative;
  margin: 0;
  height: 8px;
  z-index: 1;
  line-height: 0px;
  font-size: 0px;
  text-align: left;
  border: 2px solid;
  border-color: #999 #333 #333 #999;
}
*.carpe_vertical_slider_track *.carpe_slider {
  width: 20px;
  background-color: #666;
  color: #333;
  position: relative;
  margin: 0;
  height: 8px;
  z-index: 1;
  line-height: 0px;
  font-size: 0px;
  text-align: left;
  border: 2px solid;
  border-color: #999 #333 #333 #999;
}
*.carpe_slider_display_holder {
  background-color: #bbb;
  color: #333;
  width: 34px;
  margin: 0;
  float: left;
  padding: 0 2px 0 0;
  height: 20px;
  text-align: right;
  border: 1px solid;
  border-color: #ddd #999 #999 #ddd;
}
.carpe_slider_display {
  background-color: #bbb;
  color: #333;
  padding: 3px 1px 0 0;
  width: 30px;
  text-align: right;
  font-size: 11px;
  line-height: 10px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-weight: bold;
  border: 0;
  cursor: default;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="carpeSlider.js"></script>

Body

Paste this code into the BODY section of your HTML document


<table align="center">
<tr><td>
<div class="carpe_slider_group">
<div class="carpe_horizontal_slider_display_combo">
  <div class="carpe_slider_display_holder">
    <input class="carpe_slider_display" id="display1" type="text" value="0" />
  </div>
  <div class="carpe_horizontal_slider_track">
    <div class="carpe_slider_slit"> </div>
    <div class="carpe_slider" id="slider1" display="display1"> </div>
  </div>
</div>
<div class="spacer"> </div>
<div class="carpe_horizontal_slider_display_combo">
  <div class="carpe_horizontal_slider_track" style="background-color: #dbb; border-color: #fdd #b99 #b99 #fdd;">
    <div class="carpe_slider_slit" style="background-color: #300; border-color: #b99 #fdd #fdd #b99;"> </div>
    <div
      class="carpe_slider"
      id="slider2"
      display="display2"
      style="left: 80px; background-color: #c33; border-color: #f66 #933 #933 #f66;"> </div>
</div>
<div class="carpe_slider_display_holder" style="background-color: #dbb; border-color: #fdd #b99 #b99 #fdd;">
    <input
      class="carpe_slider_display"
      id="display2"
      style="background-color: #dbb; color: #933;"
      type="text"
      from="100"
      to="200"
      value="180" />
  </div>
</div>
<div class="carpe_horizontal_slider_display_combo">
  <div class="carpe_horizontal_slider_track" style="background-color: #bdb; border-color: #ded #9a9 #9a9 #ded;">
    <div class="carpe_slider_slit" style="background-color: #232; border-color: #9a9 #ded #ded #9a9;"> </div>
    <div
      class="carpe_slider"
      id="slider3"
      display="display3"
      style="left: 45px; background-color: #696; border-color: #9c9 #363 #363 #9c9;"> </div>
  </div>
  <div class="carpe_slider_display_holder" style="background-color: #bdb; border-color: #ded #9a9 #9a9 #ded;">
    <input
      class="carpe_slider_display"
      id="display3"
      style="background-color: #bdb; color: #363;"
      type="text"
      from="0"
      to="9"
      valeucount="10"
      value="4" />
  </div>
</div>

<div class="carpe_horizontal_slider_display_combo">
  <div class="carpe_horizontal_slider_track" style="background-color: #bcd; border-color: #def #9ab #9ab #def;">
    <div class="carpe_slider_slit" style="background-color: #003; border-color: #99b #ddf #ddf #99b;"> </div>
    <div
      class="carpe_slider"
      id="slider4"
      display="display4"
      style="left: 50px; background-color: #369; border-color: #69c #036 #036 #69c;"> </div>
  </div>
  <div class="carpe_slider_display_holder" style="background-color: #bcd; border-color: #def #9ab #9ab #def;">
    <input
      class="carpe_slider_display"
      id="display4"
      style="background-color: #bcd; color: #258;"
      type="text"
      from="0.1"
      to="0.3"
      valuecount="3"
      decimals="1"
      value="0.2" />
  </div>
</div>

</td><td>

<div class="carpe_slider_group">
  <div class="carpe_vertical_slider_display_combo">
    <div class="carpe_vertical_slider_track" style="background-color: #fff; border-color: #fff;">
      <div class="carpe_slider_slit"> </div>
      <div
        class="carpe_slider"
        id="slider5"
        orientation="vertical"
        display="display5"
        style="top: 67px; background-color: #c33; border-color: #f66 #933 #933 #f66;"> </div>
    </div>
    <div class="carpe_slider_display_holder" style="background-color: #fff; border-color: #fff;">
    <input
      class="carpe_slider_display"
      id="display5"
      style="background: #fff;"
      type="text"
      from="0"
      to="1"
      decimals="2"
      value="0.33"
      typelock="off" />
  </div>
  </div>
  <div class="carpe_vertical_slider_display_combo">
    <div class="carpe_vertical_slider_track" style="height: 50px; background-color: #fff; border-color: #fff;">
      <div class="carpe_slider_slit" style="height: 50px; "> </div>
      <div
        class="carpe_slider"
        id="slider6"
        orientation="vertical"
        distance="50"
        display="display6"
        style="top: 25px; background-color: #696; border-color: #9c9 #363 #363 #9c9;"> </div>
    </div>
    <div class="carpe_slider_display_holder" style="background-color: #fff; border-color: #fff;">
      <input
        class="carpe_slider_display"
        id="display6"
        style="background: #fff;"
        type="text"
        from="-250"
        to="250"
        valuecount="50"
        value="0"
        typelock="on" />
    </div>
  </div>
</div>
</td></tr>
</table>

User Comments

Add a comment, suggestion, or correction

Comments feed

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

1. From: Thierry Hoornaert
coordinate of slider
08/23/2008 14:33:51

2. From: Lee (Admin)
10/31/2008 15:11:42

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

1. From: Thierry Hoornaertcoordinate of slider08/23/2008 14:33:51

2. From: Lee (Admin)10/31/2008 15:11:42

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

1. From: Thierry Hoornaert
coordinate of slider
08/23/2008 14:33:51

2. From: Lee (Admin)
10/31/2008 15:11:42