JqueryUI - Slider Combine three sliders to create a simple RGB colorpicker.

SUBMITTED BY: jlolk3r

DATE: Jan. 25, 2016, 1:50 a.m.

FORMAT: HTML

SIZE: 2.4 kB

Raw Download

HITS: 1259

Report
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>jQuery UI Slider - Colorpicker</title>
  6. <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  7. <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  8. <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  9. <link rel="stylesheet" href="/resources/demos/style.css">
  10. <style>
  11. #red, #green, #blue {
  12. float: left;
  13. clear: left;
  14. width: 300px;
  15. margin: 15px;
  16. }
  17. #swatch {
  18. width: 120px;
  19. height: 100px;
  20. margin-top: 18px;
  21. margin-left: 350px;
  22. background-image: none;
  23. }
  24. #red .ui-slider-range { background: #ef2929; }
  25. #red .ui-slider-handle { border-color: #ef2929; }
  26. #green .ui-slider-range { background: #8ae234; }
  27. #green .ui-slider-handle { border-color: #8ae234; }
  28. #blue .ui-slider-range { background: #729fcf; }
  29. #blue .ui-slider-handle { border-color: #729fcf; }
  30. </style>
  31. <script>
  32. function hexFromRGB(r, g, b) {
  33. var hex = [
  34. r.toString( 16 ),
  35. g.toString( 16 ),
  36. b.toString( 16 )
  37. ];
  38. $.each( hex, function( nr, val ) {
  39. if ( val.length === 1 ) {
  40. hex[ nr ] = "0" + val;
  41. }
  42. });
  43. return hex.join( "" ).toUpperCase();
  44. }
  45. function refreshSwatch() {
  46. var red = $( "#red" ).slider( "value" ),
  47. green = $( "#green" ).slider( "value" ),
  48. blue = $( "#blue" ).slider( "value" ),
  49. hex = hexFromRGB( red, green, blue );
  50. $( "#swatch" ).css( "background-color", "#" + hex );
  51. }
  52. $(function() {
  53. $( "#red, #green, #blue" ).slider({
  54. orientation: "horizontal",
  55. range: "min",
  56. max: 255,
  57. value: 127,
  58. slide: refreshSwatch,
  59. change: refreshSwatch
  60. });
  61. $( "#red" ).slider( "value", 255 );
  62. $( "#green" ).slider( "value", 140 );
  63. $( "#blue" ).slider( "value", 60 );
  64. });
  65. </script>
  66. </head>
  67. <body class="ui-widget-content" style="border:0;">
  69. <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
  70. <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span>
  71. Simple Colorpicker
  72. </p>
  74. <div id="red"></div>
  75. <div id="green"></div>
  76. <div id="blue"></div>
  78. <div id="swatch" class="ui-widget-content ui-corner-all"></div>
  81. </body>
  82. </html>
comments powered by Disqus