This article will show you how you can create a Slider
Colorpicker Horizontal Direction Using jQuery in Asp.Net. In this
I will show you how to make a color with different color combination red, blue
and green.
Some of my previous articles are as follows: jQuery
Error Message Display Using Popup Dialog Box In Asp.Net, jQuery
Datepicker With Date Reset Button For Current Date In Asp.Net, Get
All Checked Checkbox Value Using jQuery in Asp.Net CheckBoxList, jQuery
Ajax Search and Display In MVC WebGrid in Asp.Net MVC Using C#.Net, jQuery
Drag and Drop Item Functionality In Asp.Net MVC, jQuery
Animated Dialog Window With Move, Resize and Explode Animation In Asp.Net MVC,
Auto
Scroll While Dragging Item Using jQuery In Asp.Net MVC.
So for this article first we will create a new asp.net application and first we will add the below jQuery library reference.
So for this article first we will create a new asp.net application and first we will add the below jQuery library reference.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
|
Now check the below jquery code and add into the page. This code will display and make the color
combination. As we move the red, blue and green color into the square box. Now
here is the code.
<script language="javascript">
function
ColorManager(rcolor, gcolor, bcolor) {
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 = $("#redslider").slider("value"),
green = $("#greenslider").slider("value"),
blue = $("#blueslider").slider("value"),
hex = ColorManager(redcolor,
greencolor, bluecolor);
$("#colorcombination").css("background-color", "#" + hex);
}
$(function
() {
$("#redslider,
#greenslider, #blueslider").slider({
orientation: "horizontal",
range: "min",
max: 255,
value: 127,
slide: refreshSwatch,
change: refreshSwatch
});
$("#redslider").slider("value", 120);
$("#greenslider").slider("value", 60);
$("#blueslider").slider("value", 100);
});
</script>
|
In above code we have selector function by passing the value
into ColorManager function. Now here is the complete code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm14.aspx.cs" Inherits="WebApplication2.WebForm14"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Slider
Colorpicker Horizontal Direction Using jQuery in Asp.Net</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
#redslider,
#greenslider, #blueslider
{
float:
left;
clear:
left;
width:
300px;
margin:
15px;
}
#colorcombination
{
width:
100px;
height:
80px;
margin-top:
18px;
margin-left:
350px;
background-image:
none;
}
#redslider
.ui-slider-range
{
background:
#ef2929;
}
#redslider
.ui-slider-handle
{
border-color:
#ef2929;
}
#greenslider
.ui-slider-range
{
background:
#8ae234;
}
#greenslider
.ui-slider-handle
{
border-color:
#8ae234;
}
#blueslider
.ui-slider-range
{
background:
#729fcf;
}
#blueslider
.ui-slider-handle
{
border-color:
#729fcf;
}
</style>
<script language="javascript">
function
ColorManager(rcolor, gcolor, bcolor) {
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 = $("#redslider").slider("value"),
green = $("#greenslider").slider("value"),
blue = $("#blueslider").slider("value"),
hex = ColorManager(redcolor,
greencolor, bluecolor);
$("#colorcombination").css("background-color", "#" + hex);
}
$(function
() {
$("#redslider,
#greenslider, #blueslider").slider({
orientation: "horizontal",
range: "min",
max: 255,
value: 127,
slide: refreshSwatch,
change: refreshSwatch
});
$("#redslider").slider("value", 120);
$("#greenslider").slider("value", 60);
$("#blueslider").slider("value", 100);
});
</script>
</head>
<body class="ui-widget-content" style="border: 0;">
<form id="form1" runat="server">
<div id="redslider">
</div>
<div id="greenslider">
</div>
<div id="blueslider">
</div>
<div id="colorcombination" class="ui-widget-content
ui-corner-all">
</div>
</form>
</body>
</html>
|
Now we have done run the application to check the output.
DOWNLOAD
About the Author
0 comments:
Please let me know your view