Input Range Multiple CSS Jquery Javascript Scss Sass

Developer
Paulo Sérgio
Size
2,880 Kb
Views
16,192
  1. Input Range Multiple CSS Jquery Javascript Scss Sass Previews
  2. Input Range Multiple CSS Jquery Javascript Scss Sass HTML Codes
  3. Input Range Multiple CSS Jquery Javascript Scss Sass CSS Codes
  4. Input Range Multiple CSS Jquery Javascript Scss Sass JS Codes

How do I make an input range multiple css jquery javascript scss sass?

What is a input range multiple css jquery javascript scss sass? How do you make a input range multiple css jquery javascript scss sass? This script and codes were developed by Paulo Sérgio on 19 November 2022, Saturday.

Input Range Multiple CSS Jquery Javascript Scss Sass Previews
IQ Test

Input Range Multiple CSS Jquery Javascript Scss Sass - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Input Range Multiple CSS Jquery Javascript Scss Sass</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="range-container">
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Input Range Multiple CSS Jquery Javascript Scss Sass - Script Codes CSS Codes

input[type="range"][multiple] { display: block; height: 30px; margin: 0; pointer-events: none; width: 90%;
}
input[type="range"][multiple] + input[type="range"][multiple] { margin-top: -30px;
}
input[type="range"]::-webkit-slider-thumb { pointer-events: all;
}

Input Range Multiple CSS Jquery Javascript Scss Sass - Script Codes JS Codes

var container = $("#range-container");
var values = [20 , 40 , 60 , 80 ,100]
var previus = [0,0,0,0,0];
var itemWidth = 30;
//append inputs
values.forEach(function(value, i){ var input = $('<input type="range" multiple></input>').clone(); input.attr("max" , 100) input.attr("id" , "range" + i); input.attr( "min" , 0); input.attr( "step" , 0.01); input.val(value) container.append(input); $(window).resize(function(){ //$("#range" + i).change(); input.change(); })
})
/*$("input").change(function(){ console.log($(this).val())
})*/
function getDirection(index , value){ if(previus[index] > value){ previus[index] = value; return 'left'; } previus[index] = value; return 'right';
}
function checkIfHasMove(position , index, width){ var length = (values.length - 1) - index; if(position > width - itemWidth*length){ console.log('dont has move') return false; } return true;
}
$('input').each(function(){ //console.log($(this).attr('id')) var id = $(this).attr('id'); console.log(id) $(document).on('input change', "#" + id , function() { var value = $(this).val(); var id = $(this).attr('id').split("range")[1]; var width = $(this).width(); var x = (width/100) * value; var direction = getDirection(id, value); if(!checkIfHasMove(x , id, width)){ var length = (values.length - 1) - id; //var itemWidth = (30); //var nValue = ( (width - (width/100)*length) )/ (width/100); var nValue = (width - (itemWidth*length)) / (width/100); console.log('checkIfHasMove' , nValue) $(this).val(nValue) } //console.log('direction' , direction) if(direction == "right"){ sinbling = $("#range" + (++id)); } else { sinbling = $("#range" + (--id)); } sValue = sinbling.val(); sX = sValue * (width/100); //console.log('x value' , x) //console.log('sX' , sX) if(direction == 'right' && x > sX - itemWidth){ var p = x + itemWidth; //new position var nValue = p / (width/100) //new value //console.log(nValue) sinbling.val(nValue) sinbling.change(); } else if(x < sX + itemWidth && direction == 'left'){ //console.log('collision') var p = x - itemWidth; //new position var nValue = p / (width/100) //new value //console.log(nValue) sinbling.val(nValue) sinbling.change(); } });
})
Input Range Multiple CSS Jquery Javascript Scss Sass - Script Codes
Input Range Multiple CSS Jquery Javascript Scss Sass - Script Codes
Home Page Home
Developer Paulo Sérgio
Username paulo101977
Uploaded November 19, 2022
Rating 3
Size 2,880 Kb
Views 16,192
Do you need developer help for Input Range Multiple CSS Jquery Javascript Scss Sass?

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!

Paulo Sérgio (paulo101977) Script Codes
Name
Tributo a Renato Russo
SunRay Css
Spinner Loader SVG Pure Css Radius Loader
Game of Life
Quote Api
Menu Navigation Items
D3js SVG Clip Path
Spinner pure CSS loader radius
Project Singapoure
WeatherMap
Create amazing blog posts 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!