JQuery UI Slider Colorpicker Example

Jqury UI

Nicesnippets

52

27-06-2020


Hi guys,

In this blog, I will create slider colorpicker using jquery ui. We will show you slider colorpicker in jquery ui. you can easliy make slider colorpicker example in jquery ui.We will make slider colorpicker example using jquery ui.

I will give you full example of Jquery UI slider colorpicker Example.

Example

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>jQuery UI Slider Colorpicker Example</title>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<link href="https://fonts.googleapis.com/css2?family=K2D:wght@200&family=Pathway+Gothic+One&display=swap" rel="stylesheet">

<style>

body{

background-color: #000 !important;

font-family: 'K2D', sans-serif;

}

.content{

height:200px;

padding:45px 40px;

margin:150px auto;

width:35%;

background:#fff;

}

#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;

}

#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>

</head>

<body class="ui-widget-content" style="border:0;">

<div class="content">

<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>

</div>

</body>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>

$(function(){

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, #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>

</html>

It will help you...


Recommended Posts