Build a Color Palette Range Slider Input in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

Build a Color Palette Range Slider Input in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a color palette range slider input in browser using html5 css3 and javascript.All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

 

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css"/>
<style>
  body {
  background:#1e1c34;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;}

h2 {font-size:15px; 
  color:#ffffff; 
  text-align:center; 
  font-weight:normal; 
  text-shadow: 0 1px 0 rgba(0,0,0,1);}

#holderion {
  padding:10px 20px; 
  width:200px; 
  background:rgba(41,38,68,0.3); 
  margin:30px auto;
  box-shadow: 0 0 0 1px #1c1a35 inset;}

#idnumber {
  background:none; 
  background:transparent; 
  text-align:center;}

.color {
    max-width:98%; 
    background-color:green;  
    color:#fff; 
    padding:5px 10px; 
    margin:10px auto;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    text-align:center;
    text-shadow: 0 1px 0 rgba(0,0,0,0.8);
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;}

#uislider .ui-widget-header {
  background:#f6a828  !important; 
  opacity:0.5;}

#uislider {
  width:98%;
  margin:7px auto;
  background: #2de254; /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJkZTI1NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMzJSIgc3RvcC1jb2xvcj0iI2U1OTgyYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iI2ZmMTQxNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjE0MTQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -webkit-linear-gradient(left, #2de254 0%, #e5982b 33%, #ff1414 75%, #ff1414 100%);
background: -moz-linear-gradient(left, #2de254 0%, #e5982b 33%, #ff1414 75%, #ff1414 100%);
background: -o-linear-gradient(left, #2de254 0%, #e5982b 33%, #ff1414 75%, #ff1414 100%);
background: linear-gradient(to right, #2de254 0%, #e5982b 33%, #ff1414 75%, #ff1414 100%); /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */ /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2de254', endColorstr='#ff1414',GradientType=1 ); /* IE6-8 */}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  top: -4px;
  left: 2px;
  width: 10;
  height: 10;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, red), color-stop(100%, orange));
  border-radius: 50%;
  z-index: 2;}
</style>
<!-- Work for DecomDesign -->
<div id="holderion">
  
<h2> Simple Color Slider</h2>
<div id="uislider"></div>
<div class="color">Change Color <small>use slider</small></div>
 <input type="text" id="idnumber" readonly style="border:0; color:#f6931f; font-weight:bold;">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script>
  // Work for DecomDesign
//JQUI slider
$( "#uislider" ).slider({
  range: "max",
  min: 1,
  max: 15,
  value: 1,
  slide: function( event, ui ) {
  $( "#idnumber" ).val( ui.value );
  //sliderValue = ui.value; 
  if( ui.value >= 1 && ui.value <= 5 ) {
      $('.color').css("background-color" , 'green');
      $('body').css("background-color" , '#1e1c34');
  }
  if(ui.value >= 5 && ui.value <= 10 ) {
      $('.color').css("background-color" , 'orange');
      $('body').css("background-color" , '#121127');
  }
  if( ui.value >= 11 && ui.value <= 15 ) {
      $('.color').css("background-color" , 'red')
      $('body').css("background-color" , '#0a0821');
  }
  }
});


$( "#idnumber" ).val( $( "#uislider" ).slider( "value" ) );



</script>

 

See also  Python 3 Tkinter Script to Convert Multiple Images to PDF Document Using Pillow Library GUI Desktop App Full Project For Beginners

 

 

Now if you open index.html file in the browser you will see the below screenshot

 

 

Leave a Reply