SOURCE CODE: Sliders as RGB Selectors

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
  <title>Sliders as RGB Selectors | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="color widget Uize.Color Uize.Widgets.Slider.Widget"/>
  <meta name="description" content="Get three sliders in the same room together and you've got yourself an RGB color selector. See how to get sliders to cooperate for the greater good."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href=""/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>


<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>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Sliders as RGB Selectors
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/sliders-as-rgb-selectors.html" class="buttonLink">SOURCE</a></div>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this simple example, three instances of <a href="../reference/Uize.Widgets.Slider.Widget.html"><code>Uize.Widgets.Slider.Widget</code></a> are wired up and used together by some simple logic to control the values of the red, green, and blue channels of an RGB color. As you drag the individual sliders, a color swatch above the sliders is updated to the current color.</p>

  <!-- page layout's "wireframe" with slots for sliders' HTML -->

  <table cellspacing="0" cellpadding="0" style="margin:auto;">
      <td id="page-colorSwatch" colspan="5" height="45">&nbsp;</td>
      <td colspan="5" height="6"></td>
      <td id="page-redSlider" style="height: 340px;"></td>
      <td width="6"></td>
      <td id="page-greenSlider" style="height: 340px;"></td>
      <td width="6"></td>
      <td id="page-blueSlider" style="height: 340px;"></td>
      <td colspan="5" height="6"></td>
      <td height="25" style="background:#f00">&nbsp;</td>
      <td width="6"></td>
      <td height="25" style="background:#0f0">&nbsp;</td>
      <td width="6"></td>
      <td height="25" style="background:#00f">&nbsp;</td>

<script type="text/javascript">

Uize.require (
  function () {
    'use strict';

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

    /*** code for updating the color swatch ***/
      function updateColorSwatch () {
        page.setNodeStyle ('colorSwatch',{ (rgbSliders,'#hex')});

    /*** add the slider child widgets for red, green, and blue color channels ***/
      function createChannelSlider (channel,color) {
        page.addChild (
          channel + 'Slider',
        ).wire ('Changed.value',updateColorSwatch);
      createChannelSlider ('red','#f00');
      createChannelSlider ('green','#0f0');
      createChannelSlider ('blue','#00f');
      var rgbSliders = [page.children.redSlider,page.children.greenSlider,page.children.blueSlider];

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

    /*** initialize the color swatch ***/
      updateColorSwatch ();