Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Report values from jqueryui slider colorpicker to html input text fields

Posted on 2013-11-18
5
Medium Priority
?
367 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

There is an easy way, in .NET, to centralize the treatment of all unexpected errors. First of all, instead of launching the application directly in a Form, you need first to write a Sub called Main, in a module. Then, set the Startup Object to th…
Whether you’re a college noob or a soon-to-be pro, these tips are sure to help you in your journey to becoming a programming ninja and stand out from the crowd.
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.
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …
Suggested Courses

604 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