Untitled Application MyApp Author name 1.0 Desktop False 640 480 False False False False WebApp False C:\Users\asmat\Documents\VisualNeoWeb\Libraries\img\default-icon.png .hue-horizontal { background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); background: -webkit-linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); } /*.......for range .........*/ .range{ width: 400px; height: 20px; appearance: none; background: transparent; outline: none; } .range::-webkit-slider-thumb{ appearance: none; width: 10px; height: 10px; background:white; border-radius: 50%; z-index:2; box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px; border:none; } .range::-moz-range-thumb{ appearance: none; width: 10px; height: 10px; background:white; border-radius: 50%; box-sizing:border-box; box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px; border:none; } /*............................................*/ .flexCenter{ display:flex; justify-content:center; align-items:center; } .flexSpacebetween{display:flex;align-items:center;justify-content:space-between;} en standalone Offline page #000000 / [AndroidOS,iOS,WindowsPhoneOS] normal True True False True True False False True False False var dotPos = colorDot.position(), red, green, blue, colorOpacity = 1; //break // The % of contribution from the color bar base color. var radialPercentage = Math.max(0, 1 - Math.sqrt(Math.pow(160 - dotPos.left, 2) + Math.pow(dotPos.top, 2)) / 100); // Add the radial (base) color. red = $App.baseColor1 * radialPercentage; green = $App.baseColor2 * radialPercentage; blue = $App.baseColor3 * radialPercentage; // The % of gray contribution to the color from the linear (white-to-black) gradient. var grayPercentage = dotPos.top / 90; // The linear gradient is not uniform, so divide by its slopes. var prevMax = 0; $.each([ { start: 255, max: .25, slope: 30 }, { start: 225, max: .5, slope: 60 }, { start: 175, max: .75, slope: 75 }, { start: 100, max: 1.0001, slope: 100 } ], function (index, slope) { if (grayPercentage < slope.max && grayPercentage >= prevMax) { var grayAmount = (slope.start - (grayPercentage - prevMax) / (slope.max - prevMax) * slope.slope) * (1 - radialPercentage); red += grayAmount; green += grayAmount; blue += grayAmount; } prevMax = slope.max; }); // Valid RGB values only (decimals aren't accepted). red = Math.floor(red); green = Math.floor(green); blue = Math.floor(blue); // Set the picker's color. $('#hex').text(neo.rgbToHex(red,green,blue)); $('#test').css('background',`rgb(${red},${green},${blue})`); colorDot|STRING| JavaScript var red, green, blue; // Determine the appropriate RGB values for this spot on the color bar. if (percentage < 100 / 6) { red = 255; green = Math.floor(percentage * 255 / (100 / 6)); blue = 0; } else if (percentage < 100 / 3) { red = 255 - Math.floor((percentage - 100 / 6) * 255 / (100 / 6)); green = 255; blue = 0; } else if (percentage < 50) { red = 0; green = 255; blue = Math.floor((percentage - 100 / 3) * 255 / (100 / 6)); } else if (percentage < 200 / 3) { red = 0; green = 255 - Math.floor((percentage - 50) * 255 / (100 / 6)); blue = 255; } else if (percentage < 500 / 6) { red = Math.floor((percentage - 200 / 3) * 255 / (100 / 6)); green = 0; blue = 255; } else { red = 255; green = 0; blue = 255 - Math.floor((percentage - 500 / 6) * 255 / (100 / 6)); }; $('#R').html(red); $('#G').html(green); $('#B').html(blue); //..... $App.baseColor1= red; $App.baseColor2= green; $App.baseColor3= blue; //.... $('#color,#block').css("background-color", "rgb(" + red + ", " + green + ", " + blue + ")"); // Update the color black background to match the selected color base. $('#block').css("background", "radial-gradient(circle at top right, rgb(" + red + ", " + green + ", " + blue + "), transparent 75%)," + "linear-gradient(white, rgb(225, 225, 255) 25%, " + "rgb(175, 175, 175) 50%, rgb(100, 100, 100) 75%, black)"); percentage|STRING| JavaScript return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); r|STRING|;g|STRING|;b|STRING| JavaScript BEGINJS $App.baseColor1= 0; $App.baseColor2= 255; $App.baseColor3= 255; let box = document.getElementById('block'); // Color block. var colorBlock = $("<div>", { css: { height: 90, width: 160 } }).appendTo(box) .mousedown(function (event) { // Ignore right clicks. if (event.which !== 1) return; var pos = colorBlock.offset(), height = colorBlock.height(), width = colorBlock.width(); // Updates the dot position. function UpdatePosition(left, top) { colorDot.css({ left: left - pos.left, top: top - pos.top }); neo.UpdateColor(colorDot); } // Event function during mouse move. var mouseMove = function (event) { UpdatePosition(event.clientX, event.clientY); }; // Event function for mouse up; ends the mousedown events. var mouseUp = function () { colorBlock .unbind("mousemove", mouseMove) .unbind("mouseup", mouseUp); }; // Attach events. colorBlock.mousemove(mouseMove).mouseup(mouseUp); UpdatePosition(event.clientX, event.clientY); // Cancel normal mouse click of the color box. return false; }); // Color dot. let colorDot = $("<div>", { css: { position: "absolute", height: 6, width: 6, margin: -2, background: "rgba(255,255,255,0.7)", border: "1px solid black", "border-radius": 20 } }).appendTo(colorBlock); //.................... neo.rangeSlider(50); $('#block').css("background", "radial-gradient(circle at top right, rgb(" + 0 + ", " + 255 + ", " +255 + "), transparent 75%)," + "linear-gradient(white, rgb(225, 225, 255) 25%, " + "rgb(175, 175, 175) 50%, rgb(100, 100, 100) 75%, black)"); ENDJS 180px 50px 160px 180px 0px 0px 160px 90px top 10px 150px 140px 10px top 10px 10px 10px hue-horizontal flexCenter <input ontouchmove="neo.rangeSlider(this.value)" class="range" onmousemove="neo.rangeSlider(this.value)" type="range" ng-model="$root.x" min="0" max="100" value="1" > 10px 120px 140px 20px top 10px 10px flexCenter 10px 140px 140px 20px top 10px 5px flexCenter HEX 350px 100px 40px 40px 350px 50px 40px 40px 0px 0px 640px 480px False custom