Solved

Report values from jqueryui slider colorpicker to html input text fields

Posted on 2013-11-18
5
322 Views
Last Modified: 2013-12-03
I am using the jqueryui colorpicker and I would like to echo the values for each of the sliders and the aggregate swatch to html text input fields.

Can anybody help me.

Thank you

John
0
Comment
Question by:johnecollins
  • 3
  • 2
5 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 39658707
Here

Main changes are

      $("#red").find(".ui-slider-handle").html('<span class="but">'+red+'</span>');
      $("#green").find(".ui-slider-handle").html('<span class="but">'+green+'</span>');
      $("#blue").find(".ui-slider-handle").html('<span class="but">'+blue+'</span>');

      $("#hexVal").val("#"+hex);

Open in new window




<!doctype html>
 
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Slider - Colorpicker</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
  #red, #green, #blue {
    float: left;
    clear: left;
    width: 300px;
    margin: 15px;
  }
  #swatch {
    width: 120px;
    height: 100px;
    margin-top: 18px;
    margin-left: 350px;
    background-image: none;
  }
  .but { font-size:xx-small;}
  #hexVal { border:none; padding-left:40px;}
  a.ui-slider-handle { text-decoration:none;}
  #red .ui-slider-range { background: #ef2929; }
  #red .ui-slider-handle { border-color: #ef2929; }
  #green .ui-slider-range { background: #8ae234; }
  #green .ui-slider-handle { border-color: #8ae234; }
  #blue .ui-slider-range { background: #729fcf; }
  #blue .ui-slider-handle { border-color: #729fcf; }
  </style>
  <script>
  function hexFromRGB(r, g, b) {
    var hex = [
      r.toString( 16 ),
      g.toString( 16 ),
      b.toString( 16 )
    ];
    $.each( hex, function( nr, val ) {
      if ( val.length === 1 ) {
        hex[ nr ] = "0" + val;
      }
    });
    return hex.join( "" ).toUpperCase();
  }
  function refreshSwatch() {
    var red = $( "#red" ).slider( "value" ),
      green = $( "#green" ).slider( "value" ),
      blue = $( "#blue" ).slider( "value" ),
      hex = hexFromRGB( red, green, blue );
      $( "#swatch" ).css( "background-color", "#" + hex );
      $("#red").find(".ui-slider-handle").html('<span class="but">'+red+'</span>');
      $("#green").find(".ui-slider-handle").html('<span class="but">'+green+'</span>');
      $("#blue").find(".ui-slider-handle").html('<span class="but">'+blue+'</span>');

      $("#hexVal").val("#"+hex);
  }
  $(function() {
    $( "#red, #green, #blue" ).slider({
      orientation: "horizontal",
      range: "min",
      max: 255,
      value: 127,
      slide: refreshSwatch,
      change: refreshSwatch
    });
    $( "#red" ).slider( "value", 255 );
    $( "#green" ).slider( "value", 140 );
    $( "#blue" ).slider( "value", 60 );
  });
  </script>
</head>
<body class="ui-widget-content" style="border: 0;">
 
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding: 4px;">
  <span class="ui-icon ui-icon-pencil" style="float: left; margin: -2px 5px 0 0;"></span>
  Simple Colorpicker
</p>
 
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
 
<div id="swatch" class="ui-widget-content ui-corner-all"></div><input type="text" id="hexVal" value="" />
 
 
</body>
</html>

Open in new window

0
 

Author Comment

by:johnecollins
ID: 39667462
Hi mplungjan,

Thank you very much for responding, I am sorry that it has taken so long to respond.

I was not aware you had answered, but I am working through your solution  and I have come across a bit of grief with the 1.10.3 css and js files but I am working through the issues no problem.

I will be in touch very soon

Thank you very much

John
0
 

Author Comment

by:johnecollins
ID: 39682463
Hi mplungjan,

I have installed Visual Studio 2012 on a laptop and tried to add wampserver, but can't get wampserver to run successfully and end up with an orange W in the tray.

I am considering removing VS 2012 and trying to install wampserver again and I am hoping to run your solution then.

I will get this done by Sunday

Thanks for your patience

John
0
 

Author Closing Comment

by:johnecollins
ID: 39693974
Hi mplungjan

Thank you very much for your solution it works just fine and does what I want.

Once again Thank you

John
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39694790
You are welcome
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this tutorial I will show you how to provide a dynamic RTF document on your website generated with data from your database. For this tutorial you will need Microsoft Word or WordPad, WhizBase and Microsoft Access. In this tutorial I will show …
If you haven’t already, I encourage you to read the first article (http://www.experts-exchange.com/articles/18680/An-Introduction-to-R-Programming-and-R-Studio.html) in my series to gain a basic foundation of R and R Studio.  You will also find the …
The viewer will be introduced to the technique of using vectors in C++. The video will cover how to define a vector, store values in the vector and retrieve data from the values stored in the vector.
This video will show you how to get GIT to work in Eclipse.   It will walk you through how to install the EGit plugin in eclipse and how to checkout an existing repository.

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

27 Experts available now in Live!

Get 1:1 Help Now