<div id="preview-area"> <div></div> <div></div> </div> <p>Input: <input type="text" id="hex-color-input" value="#398" placeholder="#000000" /> </p> <div id="range-slider"></div> <div id="itempager" style="position:relative;"><a title="Variasi Blogger" style="display:block!important;visibility:visible!important;opacity:1!important;position:absolute;bottom:10px;right:35px;font:normal bold 8px Arial,Sans-Serif!important;color:#666;text-shadow:0 1px 0 rgba(255,255,255,.1);text-decoration:none;" href="http://sweup.com" target="_blank">►احصل عليها</a> </div>
/** * http://www.sweup.com */ function colorLuminance(hex, lum) { // Validate hex string hex = String(hex).replace(/[^0-9a-f]/gi, ""); if (hex.length < 6) { hex = hex.replace(/(.)/g, '$1$1'); } lum = lum || 0; var rgb = "#", c; for (var i = 0; i < 3; ++i) { c = parseInt(hex.substr(i * 2, 2), 16); c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16); rgb += ("00" + c).substr(c.length); } return rgb; } function rangeSlider(e,d){var k=document.documentElement,l=document.createElement("div"),a=document.createElement("span"),p=false,q,j,c,h;var f={value:0,vertical:false,rangeClass:"",draggerClass:"",drag:function(i){}};for(var g in f){if(typeof d[g]=="undefined"){d[g]=f[g]}}function m(r,s,i){if(r.addEventListener){r.addEventListener(s,i,false)}else{if(r.attachEvent){r.attachEvent("on"+s,i)}else{r["on"+s]=i}}}var o=d.vertical;e.className=(e.className+" range-slider "+(o?"range-slider-vertical":"range-slider-horizontal")).replace(/^ +/,"");l.className=("range-slider-track "+d.rangeClass).replace(/ +$/,"");a.className=("dragger "+d.draggerClass).replace(/ +$/,"");m(l,"mousedown",function(i){k.className=(k.className+" no-select").replace(/^ +/,"");q=l[!o?"offsetWidth":"offsetHeight"];j=l[!o?"offsetLeft":"offsetTop"];c=a[!o?"offsetWidth":"offsetHeight"];p=true;n(i);return false});m(document,"mousemove",function(i){n(i)});m(document,"mouseup",function(i){k.className=k.className.replace(/(^| )no-select( |$)/g,"");p=false});m(window,"resize",function(r){var i=a[!o?"offsetWidth":"offsetHeight"];a.style[!o?"left":"top"]=(((h/100)*l[!o?"offsetWidth":"offsetHeight"])-(i/2))+"px";p=false});function n(i){i=i||window.event;var r=!o?i.pageX:i.pageY;if(!r){r=!o?i.clientX+document.body.scrollLeft+document.documentElement.scrollLeft:i.clientY+document.body.scrollTop+document.documentElement.scrollTop}if(p&&r>=j&&r<=(j+q)){a.style[!o?"left":"top"]=(r-j-(c/2))+"px";h=Math.round(((r-j)/q)*100);d.drag(h)}}function b(){var i=a[!o?"offsetWidth":"offsetHeight"];h=((d.value/100)*l[!o?"offsetWidth":"offsetHeight"]);a.style[!o?"left":"top"]=(h-(i/2))+"px";d.drag(d.value)}l.appendChild(a);e.appendChild(l);b()}; var slider = document.getElementById('range-slider'), color = document.getElementById('hex-color-input'), preview = document.getElementById('preview-area'); rangeSlider(slider, { drag: function (v) { var lighter = colorLuminance(color.value, (v * 0.01)), darker = colorLuminance(color.value, -(v * 0.01)); // Lighter... preview.children[0].style.backgroundColor = lighter; // Darker... preview.children[1].style.backgroundColor = darker; // Preview... preview.children[0].innerHTML = '<span>↑ ' + v + '% = ' + lighter + '</span>'; preview.children[1].innerHTML = '<span>↓ ' + v + '% = ' + darker + '<span>'; } });
body { background-color:white; color:black; padding:30px; } #preview-area { height:100px; overflow:hidden; } #preview-area div { float:left; width:50%; height:inherit; } #preview-area div span { display:block; background-color:white; } p { display:block; margin:1em 0; } .range-slider {margin:0 auto 1em} .range-slider-track { width:auto; height:20px; margin:0 auto; position:relative; cursor:e-resize; } .range-slider-track:before { content:""; display:block; position:absolute; top:9px; left:0; width:100%; height:2px; background-color:black; } .range-slider-track .dragger { display:block; width:10px; height:inherit; position:relative; z-index:2; background-color:red; cursor:inherit; /* opacity:.6; */ } .range-slider-vertical { display:inline-block; vertical-align:middle; margin:0 1em 1em 0; } .range-slider-vertical .range-slider-track { cursor:n-resize; width:20px; height:100px; } .range-slider-vertical .range-slider-track:before { top:0; right:auto; left:9px; width:2px; height:100%; } .range-slider-vertical .range-slider-track .dragger { width:inherit; height:10px; } .no-select { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }