SOURCE CODE: Slider Plus Buttons
VIEW EXAMPLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Slider Plus Buttons | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="widget Uize.Widget.Bar.Slider.Plus"/>
  <meta name="description" content="See how to use a slider widget that has buttons for incrementing or decrementing the value, and buttons for selecting the maximum and minimum values."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
  <link rel="stylesheet" href="../css/widget.slideshow.css"/>
</head>

<body>

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

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Slider Plus Buttons
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/slider-plus.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, an instance of <a href="../reference/Uize.Widget.Bar.Slider.Plus.html"><code>Uize.Widget.Bar.Slider.Plus</code></a> is being wired up. This widget class wires up additional buttons for incrementing the value in either direction, and for setting the value to either extreme of the slider's range. Notice how the appropriate buttons become disabled when you're at either extreme of the slider's range. This is true of both using the buttons to change the value and dragging the slider's knob. If you're dragging the knob, then hitting either of the extreme's of the range will disable buttons appropriately.</p>
  </div>

  <!-- slider UI -->

  <table border="0" cellspacing="2" cellpadding="0" style="margin:auto;" class="insetBackgroundColor">
    <tr valign="top">
      <td><a id="page_slider_setToMin" class="navButton" href="javascript://"><div class="arrow towardsFirst gotoFirst"></div></a></td>
      <td><a id="page_slider_stepToMin" class="navButton" href="javascript://"><div class="arrow towardsFirst gotoPrevious"></div></a></td>
      <td>
        <div style="position:relative; left:0px; top:0px; width:319px; height:27px; background:#52575a;">
          <div id="page_slider-track" style="position:absolute; left:1px; top:1px; width:317px; height:25px; background:url(../js/Uize/Widget/Bar/Slider/track-bg-horizontal.gif); cursor:pointer;">
            <img id="page_slider-knob" src="../js/Uize/Widget/Bar/Slider/knob-horizontal.gif" style="position:absolute; left:0px; top:0px; width:25px; height:25px; cursor:pointer;" border="0" hspace="0" vspace="0" alt=""/>
          </div>
        </div>
      </td>
      <td><a id="page_slider_stepToMax" class="navButton" href="javascript://"><div class="arrow towardsLast gotoNext"></div></a></td>
      <td><a id="page_slider_setToMax" class="navButton" href="javascript://"><div class="arrow towardsLast gotoLast"></div></a></td>
    </tr>
  </table>
</div>

<!-- JavaScript code to make the static slider HTML "come alive" -->

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'Uize.Widget.Bar.Slider.Plus'
  ],
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ();

    /*** add the slider child widget ***/
      page.addChild (
        'slider',
        Uize.Widget.Bar.Slider.Plus,
        {
          minValue:0,
          maxValue:200,
          orientation:'horizontal',
          built:false
        }
      );

    /*** wire up the page widget ***/
      page.wireUi ();
  }
);

</script>

</body>
</html>