Multi range slider with gradient

Developer
David Bellotti
Size
2,909 Kb
Views
6,072
  1. Multi range slider with gradient Previews
  2. Multi range slider with gradient HTML Codes
  3. Multi range slider with gradient CSS Codes
  4. Multi range slider with gradient JS Codes

How do I make an multi range slider with gradient?

What is a multi range slider with gradient? How do you make a multi range slider with gradient? This script and codes were developed by David Bellotti on 22 January 2023, Sunday.

Multi range slider with gradient Previews
IQ Test

Multi range slider with gradient - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>multi range slider with gradient</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div id="slider-range"></div> <p> <div class="input-group"> <label for="red-amount" style="font-weight:bold;">Red&nbsp;</label><input id="red-amount" readonly="" style="border:0;" type="text" /> </div> <div class="input-group"> <label for="blue-amount" style="font-weight:bold;">Blue&nbsp;</label><input id="blue-amount" readonly="" style="border:0;" type="text" /> </div> <div class="input-group"> <label for="white-amount" style="font-weight:bold;">White&nbsp;</label><input id="white-amount" readonly="" style="border:0;" type="text" /> </div> </p>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Multi range slider with gradient - Script Codes CSS Codes

.wrapper { width: 50vw;
}
.input-group { display: inline-block; width: 30%;
}
.input-group input { width: 50%;
}
#slider-range { background: -webkit-linear-gradient(left, red 20%, blue 40%, white 80%); background: linear-gradient(to right, red 20%, blue 40%, white 80%);
}
.ui-slider-range { background: none;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100vh;
}

Multi range slider with gradient - Script Codes JS Codes

$( function() { $( "#slider-range" ).slider({ range: true, min: 0, max: 100, values: [ 30, 70 ], slide: function( event, ui ) { var red = ui.values[ 0 ]; var blue = ui.values[ 1 ] - ui.values[ 0 ]; var white = 100 - blue - red; $( "#slider-range" ).css("background", "linear-gradient(to right, " + "red " + (red - 10) + "%, " + "blue " + (red + 10) + "%, " + "white " + (red + blue + 10) + "%"); $( "#red-amount" ).val(red + "%"); $( "#blue-amount" ).val(blue + "%"); $( "#white-amount" ).val(white + "%"); } }); var $slider = $( "#slider-range" ); $( "#red-amount" ).val($slider.slider( "values", 0 ) + "%"); $( "#blue-amount" ).val($slider.slider( "values", 1 ) - $slider.slider( "values", 0 ) + "%"); $( "#white-amount" ).val(100 - ($slider.slider( "values", 1 ) - $slider.slider( "values", 0 )) - $slider.slider( "values", 0 ) + "%");
} );
Multi range slider with gradient - Script Codes
Multi range slider with gradient - Script Codes
Home Page Home
Developer David Bellotti
Username dbellotti
Uploaded January 22, 2023
Rating 3
Size 2,909 Kb
Views 6,072
Do you need developer help for Multi range slider with gradient?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

David Bellotti (dbellotti) Script Codes
Name
Star Power
Pyramid in Desert
Galaxy
Solar System - WIP
Material Floating Input Label
Material Design Lite components demo
Arora
Snack time
Combinator
A Pen by David Bellotti
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!