1<!doctype html>234<meta charset= "Utf-8" >5<title>jquery UI Slider (slider)-Color Picker </title>6<link rel= "stylesheet" href= "//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css" >7<script src= "//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js" ></script>8<script src= "//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js" ></script>9<link rel= "stylesheet" href= "Jqueryui/style.css" >Ten<style> One #red, #green, #blue { A float: Left; - Clear:left; - width:300px; the margin:15px; - } - #swatch { - width:120px; + height:100px; -margin-top:18px; +margin-left:350px; Abackground-Image:none; at } -#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;} in#blue. ui-slider-handle {border-color: #729fcf;} -</style> to<script> + functionHexfromrgb (R, G, b) { - varHex = [ theR.tostring (16 ), *G.tostring (16 ), $B.tostring (16 )Panax Notoginseng ]; -$.each (Hex,function(NR, val) { the if(Val.length = = 1 ) { +hex[nr] = "0" +Val; A } the }); + returnHex.join (""). toUpperCase (); - } $ functionRefreshswatch () { $ varRed = $ ("#red"). Slider ("value") ), -Green = $ ("#green"). Slider ("value") ), -Blue = $ ("#blue"). Slider ("value") ), theHex =Hexfromrgb (red, green, blue); -$ ("#swatch"). CSS ("Background-color", "#" +hex);Wuyi } the$(function() { -$ ("#red, #green, #blue"). Slider ({ WuOrientation: "Horizontal", -Range: "Min", Aboutmax:255, $value:127, - Slide:refreshswatch, - Change:refreshswatch - }); A$ ("#red"). Slider ("Value", 255 ); +$ ("#green"). Slider ("Value", 140 ); the$ ("#blue"). Slider ("Value", 60 ); - }); $</script> the the<body class= "ui-widget-content" style= "border:0;" > the the<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> in Simple Color Picker the</p> the About<div id= "Red" ></div> the<div id= "Green" ></div> the<div id= "Blue" ></div> the +<div id= "swatch" class= "Ui-widget-content ui-corner-all" ></div> - the Bayi</body> theView CodeWebsite
The rest will not be written, the rookie wrote very detailed
JQuery UI Slider (slider)