Slider: vertical and horizontal, tick mark, animate the movement of the thumb : Slider « GUI Components « JavaScript DHTML






Slider: vertical and horizontal, tick mark, animate the movement of the thumb


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"
    xmlns:x2="http://www.w3.org/TR/xhtml2"
    xmlns:role="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
    xmlns:state="http://www.w3.org/2005/07/aaa">
<head>
<title>Yahoo! UI Library - Slider Widget</title>
<link rel="stylesheet" type="text/css" href="./examples/dragdrop/css/screen.css">
<style type="text/css">
</style>
</head>
<body> 
<div id="pageTitle"><h3>Drag and Drop - Slider Widgets</h3></div> 

<div id="container">
  <div id="containerTop">
    <div id="header"><img src="./examples/dragdrop/img/logo.gif" vspace="4" hspace="4" /></div>
  <div id="main">

    <div id="content"> 
      <div class="newsItem"> 
      <h3>Basic Sliders</h3>
        <p>
        The slider widget is an implementation of YAHOO.util.DragDrop 
        It also will use YAHOO.util.Animation if available to
        animate the movement of the thumb when you click the 
        slider background.

        The only difference between the two sliders aside from
        the fact that one is vertical and one horizontal is that 
        the horizontal slider implements the "tick mark" feature
        of drag and drop; it will "snap" to the tick marks spaced
        25 pixels apart.
        </p>
              <!--
        <p>
        <a href="javascript:slider1.lock()">Lock</a>
        <a href="javascript:slider1.unlock()">Unlock</a>
        </p>
              -->

              <div id="vertWrapper">
              <div 
                 id="vertBGDiv"
                 name="vertBGDiv"
                 tabindex="0" 
                 x2:role="role:slider" 
                 state:valuenow="0" 
                 state:valuemin="0" 
                 state:valuemax="200"
                 title="Vertical Slider" 
                 onkeypress="return handleVertSliderKey(this, YAHOO.util.Event.getEvent(event))"
               >
              <div id="vertHandleDiv"><img src="./examples/dragdrop/img/vertSlider.png"></div> 
              </div>

                <div id="vertValueDiv">
                    <form name="formV" onsubmit="return updateVert()">
                    <input name="vertVal" id="vertVal" type="text" value="0" size="4" maxlength="4" />
                    <input type="button" value="Update" onclick="updateVert()" />
                    </form>
                </div>


              </div>
 
           <div id="horizWrapper">
           <div
             id="horizBGDiv"
             name="horizBGDiv"
             tabindex="0" 
             x2:role="role:slider" 
             state:valuenow="0" 
             state:valuemin="-100" 
             state:valuemax="100"
             title="Horizontal Slider" 
             onkeypress="return handleHorizSliderKey(this, YAHOO.util.Event.getEvent(event))"
           >
             <div id="horizHandleDiv" ><img src="./examples/dragdrop/img/horizSlider.png"></div> 

          </div> 

            <div id="horizValueDiv">
                <form name="formH" onsubmit="return updateHoriz()">
                <input name="horizVal" id="horizVal" type="text" value="0" size="4" maxlength="4" />
                <input type="button" value="Update" onclick="updateHoriz()" />
                </form>
            </div>


          </div>

     
    </div> 
      
    </div>
  </div>
</div>

<div id="content"> 
    <h3>Color Picker</h3>
      <p>
      Implements a slider region and a vertical slider to implement an HSV color
      picker.
      </p>

        <div id="pickerPanel" class="dragPanel">
            <h4 id="pickerHandle">&nbsp;</h4>
            <div id="pickerDiv">
              <img id="pickerbg" src="./examples/dragdrop/img/pickerbg.png" alt="">
              <div id="selector"><img src="./examples/dragdrop/img/select.gif"></div> 
            </div>

             <div id="hueBg">
              <div id="hueThumb"><img src="./examples/dragdrop/img/hline.png"></div> 
            </div> 

            <div id="pickervaldiv">
                <form name="pickerform" onsubmit="return pickerUpdate()">
                <br />
                R <input name="pickerrval" id="pickerrval" type="text" value="0" size="3" maxlength="3" />
                H <input name="pickerhval" id="pickerhval" type="text" value="0" size="3" maxlength="3" />
                <br />
                G <input name="pickergval" id="pickergval" type="text" value="0" size="3" maxlength="3" />
                S <input name="pickergsal" id="pickersval" type="text" value="0" size="3" maxlength="3" />
                <br />
                B <input name="pickerbval" id="pickerbval" type="text" value="0" size="3" maxlength="3" />
                V <input name="pickervval" id="pickervval" type="text" value="0" size="3" maxlength="3" />
                <br />
                <br />
                # <input name="pickerhexval" id="pickerhexval" type="text" value="0" size="6" maxlength="6" />
                <br />

                </form>
            </div>

            <div id="pickerSwatch">&nbsp;</div>
        </div>


    </div> 
      
    </div>
  </div>
</div>

<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/logger/logger.js" ></script>

<script type="text/javascript" src="./build/dragdrop/dragdrop.js" ></script>
<script type="text/javascript" src="./examples/dragdrop/js/color.js" ></script>
<script type="text/javascript" src="./examples/dragdrop/js/key.js" ></script>
<script type="text/javascript" src="./build/animation/animation.js" ></script>
<script type="text/javascript" src="./build/slider/slider.js" ></script>
<script type="text/javascript">

  var hue;
  var picker;
  var dd1, dd2;
  var r, g, b;

  function init() {
        standardSliderInit();
        // rgbInit();
        pickerInit();
    }

    // Picker ---------------------------------------------------------

    function pickerInit() {
    hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
    hue.onChange = function(newVal) { hueUpdate(newVal); };

    picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 
        0, 180, 0, 180);
    picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };

    hueUpdate();

    dd1 = new YAHOO.util.DD("pickerPanel");
    dd1.setHandleElId("pickerHandle");
    dd1.endDrag = function(e) {
      // picker.thumb.resetConstraints();
      // hue.thumb.resetConstraints(); 
        };
  }

  window.onload = init;

  function pickerUpdate(newX, newY) {
    pickerSwatchUpdate();
  }

  function hueUpdate(newVal) {

    var h = (180 - hue.getValue()) / 180;
    if (h == 1) { h = 0; }

    YAHOO.log("hue " + hue.getValue());

    var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);

    document.getElementById("pickerDiv").style.backgroundColor = 
      "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";

    pickerSwatchUpdate();
  }

  function pickerSwatchUpdate() {
    var h = (180 - hue.getValue());
    if (h == 180) { h = 0; }
    document.getElementById("pickerhval").value = (h*2);

    h = h / 180;
    YAHOO.log("h " + hue.getValue());

    var s = picker.getXValue() / 180;
    document.getElementById("pickersval").value = Math.round(s * 100);

    YAHOO.log("s " + s);

    var v = (180 - picker.getYValue()) / 180;
    document.getElementById("pickervval").value = Math.round(v * 100);

    YAHOO.log("v " + v);

    var a = YAHOO.util.Color.hsv2rgb( h, s, v );

    document.getElementById("pickerSwatch").style.backgroundColor = 
      "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";

    document.getElementById("pickerrval").value = a[0];
    document.getElementById("pickergval").value = a[1];
    document.getElementById("pickerbval").value = a[2];
    document.getElementById("pickerhexval").value = 
      YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
  }


    // RGB slider ---------------------------------------------------------

  function rgbInit() {

    r = YAHOO.widget.Slider.getHorizSlider("rBG", "rthumb", 0, 128);
    r.onChange = function(newVal) { listenerUpdate("r", newVal*2); };

    g = YAHOO.widget.Slider.getHorizSlider("gBG", "gthumb", 0, 128);
    g.onChange = function(newVal) { listenerUpdate("g", newVal*2); };

    b = YAHOO.widget.Slider.getHorizSlider("bBG", "bthumb", 0, 128);
    b.onChange = function(newVal) { listenerUpdate("b", newVal*2); };

    initColor();

    dd2 = new YAHOO.util.DD("rgbPanel");
    dd2.setHandleElId("rgbHandle");
    dd2.endDrag = function(e) {
      // r.thumb.resetConstraints();
      // g.thumb.resetConstraints();
      // b.thumb.resetConstraints();
    }
  }


  function initColor() {
    var ch = " ";

    d = document.createElement("P");
    d.className = "rb";
    r.getEl().appendChild(d);
    d = document.createElement("P");
    d.className = "rb";
    g.getEl().appendChild(d);
    d = document.createElement("P");
    d.className = "rb";
    b.getEl().appendChild(d);

    for (var i=0; i<34; i++) {
      d = document.createElement("SPAN");
      d.id = "rBG" + i
      // d.innerHTML = ch;
      r.getEl().appendChild(d);

      d = document.createElement("SPAN");
      d.id = "gBG" + i
      // d.innerHTML = ch;
      g.getEl().appendChild(d);

      d = document.createElement("SPAN");
      d.id = "bBG" + i
      // d.innerHTML = ch;
      b.getEl().appendChild(d);
    }

    d = document.createElement("P");
    d.className = "lb";
    r.getEl().appendChild(d);
    d = document.createElement("P");
    d.className = "lb";
    g.getEl().appendChild(d);
    d = document.createElement("P");
    d.className = "lb";
    b.getEl().appendChild(d);

    userUpdate();
  }

  function updateSliderColors() {
    var curr, curg, curb;
    curr = Math.min(r.getValue() * 2, 255);
    curg = Math.min(g.getValue() * 2, 255);
    curb = Math.min(b.getValue() * 2, 255);

        YAHOO.log("updateSliderColor " + curr + ", " + curg + ", " + curb);

    var d;
    for (var i=0; i<34; i++) {
      d = document.getElementById("rBG" + i);
      d.style.backgroundColor = 
        "rgb(" + (i*8) + "," + curg + "," + curb + ")";

      d = document.getElementById("gBG" + i);
      d.style.backgroundColor = 
        "rgb(" + curr + "," + (i*8) + "," + curb + ")";

      d = document.getElementById("bBG" + i);
      d.style.backgroundColor = 
        "rgb(" + curr + "," + curg + "," + (i*8) + ")";
    }

    document.getElementById("rgbSwatch").style.backgroundColor =
      "rgb(" + curr + "," + curg + "," + curb + ")";

    document.getElementById("hexval").value = 
          YAHOO.util.Color.rgb2hex(curr, curg, curb);
  }


  function listenerUpdate(whichSlider, newVal) {
    if (newVal == 256) {
      newVal = 255;
    }
    document.getElementById(whichSlider + "val").value = newVal;
    updateSliderColors();
  }

  function userUpdate(isHex) {
        YAHOO.log("userupdate");
    var v;
    var f = document.forms['rgbform'];

    if (isHex) {
      var hexval = f["hexval"].value;
      // shorthand #369
      if (hexval.length == 3) {
        var newval = "";
        for (var i=0;i<3;i++) {
          var a = hexval.substr(i, 1);
          newval += a + a;
        }

        hexval = newval;
      }

      YAHOO.log("hexval:" + hexval);

      if (hexval.length != 6) {
        alert("illegal hex code: " + hexval);
      } else {
        var rgb = YAHOO.util.Color.hex2rgb(hexval);
        // alert(rgb.toString());
        if (YAHOO.util.Color.isValidRGB(rgb)) {
          f['rval'].value = rgb[0];
          f['gval'].value = rgb[1];
          f['bval'].value = rgb[2];
        }
      }
    }

    // red
    v = parseFloat(f['rval'].value);
    v = ( isNaN(v) ) ? 0 : Math.round(v);
    r.setValue(Math.round(v) / 2);

    v = parseFloat(f['gval'].value);
    v = ( isNaN(v) ) ? 0 : Math.round(v);
    g.setValue(Math.round(v) / 2);

    v = parseFloat(f['bval'].value);
    v = ( isNaN(v) ) ? 0 : Math.round(v);
    b.setValue(Math.round(v) / 2);

    updateSliderColors();

    return false;
  }

  function userReset() {
    var v;
    var f = document.forms['rgbform'];

    r.setValue(0);
    g.setValue(0);
    b.setValue(0);
  }

var slider1, slider2;
  function standardSliderInit() {

    slider1 = YAHOO.widget.Slider.getVertSlider("vertBGDiv", "vertHandleDiv", 0, 200);

    slider1.onChange = function(offsetFromStart) {
      document.getElementById("vertVal").value = offsetFromStart;
    }

    slider2 = YAHOO.widget.Slider.getHorizSlider("horizBGDiv", "horizHandleDiv", 100, 100, 25);

    slider2.onChange = function(offsetFromStart) {
      document.getElementById("horizVal").value = offsetFromStart;
    }

        // if (document.getElementById("vertBGDiv").getAttributeNS) {
            // slider1.focusOnClick = true;
            // slider2.focusOnClick = true;
        // }
  }

  function updateVert() {
    var v = parseFloat(document.forms['formV']['vertVal'].value, 10);
    if ( isNaN(v) ) v = 0;
    slider1.setValue(Math.round(v));
    return false;
  }
  
  function updateHoriz() {
    var v = parseFloat(document.forms['formH']['horizVal'].value, 10);
    if ( isNaN(v) ) v = 0;
    slider2.setValue(Math.round(v));
    return false;
  }

// accessibility keypress test
function handleHorizSliderKey(slider, ev) {
    YAHOO.log("horizontal slider keypress");

    // Firefox 1.5+ only at this point
    if (!slider.getAttributeNS) {
        return true;
    }

  // var valueNow = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow"));

  var valueNow = slider2.getValue();

  var valueMin = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemin"));
  var valueMax = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemax"));

  var delta = 0;

  var kc = ev.keyCode;

  YAHOO.log("keycode: " + kc);

  if (kc == YAHOO.util.Key.DOM_VK_LEFT) {
    delta = -25;
  } else if (kc == YAHOO.util.Key.DOM_VK_RIGHT) {
    delta = 25;
  } else if (kc == YAHOO.util.Key.DOM_VK_HOME) {
    delta = -( valueNow - valueMin );
  } else if (kc == YAHOO.util.Key.DOM_VK_END) {
    delta = valueMax - valueNow;
  } else {
    return true;
  }
  
  valueNow += delta;

  slider2.setValue(valueNow, true);

  slider.setAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow", valueNow);
  
  // displaySlider(slider);

  return false;
}

function handleVertSliderKey(slider, ev) {
  YAHOO.log("vertical slider keypress");

    // Firefox 1.5+ only at this point
    if (!slider.getAttributeNS) {
        return true;
    }

  // var valueNow = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow"));

  var valueNow = slider1.getValue();

  var valueMin = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemin"));
  var valueMax = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemax"));

  var delta = 0;
  var kc = ev.keyCode;
  if (kc == YAHOO.util.Key.DOM_VK_UP) {
    delta = -20;
  }
  else if (kc == YAHOO.util.Key.DOM_VK_DOWN) {
    delta = 20;
  }
  else if (kc == YAHOO.util.Key.DOM_VK_HOME) {
    delta = -( valueNow - valueMin );
  }
  else if (kc == YAHOO.util.Key.DOM_VK_END) {
    delta = valueMax - valueNow;
  }
  else {
    return true;
  }
  
  valueNow += delta;
  if (valueNow < valueMin) {
    valueNow = valueMin;
  }

  if (valueNow > valueMax) {
    valueNow = valueMax;
  }  
  slider.setAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow", valueNow);
  
  // displaySlider(slider);
  slider1.setValue(valueNow, true);

  return false;
}

</script>


<!--[if gte IE 5.5000]>
<script type="text/javascript">

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
   {
   for(var i=0; i<document.images.length; i++)
      {
    var img = document.images[i]
    var imgName = img.src.toUpperCase()
    if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
       {
     var imgID = (img.id) ? "id='" + img.id + "' " : ""
     var imgClass = (img.className) ? "class='" + img.className + "' " : ""
     var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
     var imgStyle = "display:inline-block;" + img.style.cssText 
     if (img.align == "left") imgStyle = "float:left;" + imgStyle
     if (img.align == "right") imgStyle = "float:right;" + imgStyle
     if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle    
     var strNewHTML = "<span " + imgID + imgClass + imgTitle
     + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
       + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
     + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
     img.outerHTML = strNewHTML
     i = i-1
       }
      }
   }

YAHOO.util.Event.addListener(window, "load", correctPNG);

</script>
<![endif]-->

</body>
</html>

           
       








yui.zip( 3,714 k)

Related examples in the same category

1.Yahoo! UI Library - Slider Widget
2.Yahoo! UI Library - Slider Widget 2: animate the movement of the thumb
3.Yahoo! UI Library - Slider Widget 3:
4.The RGB slider implements three slider controls to generate a RGB color
5.Slider for color picker