Input range and data-attribute shenanigans

Developer
Zachary Kain
Size
3,014 Kb
Views
32,384
  1. Input range and data-attribute shenanigans Previews
  2. Input range and data-attribute shenanigans HTML Codes
  3. Input range and data-attribute shenanigans CSS Codes
  4. Input range and data-attribute shenanigans JS Codes

How do I make an input range and data-attribute shenanigans?

What is a input range and data-attribute shenanigans? How do you make a input range and data-attribute shenanigans? This script and codes were developed by Zachary Kain on 01 September 2022, Thursday.

Input range and data-attribute shenanigans Previews
IQ Test

Input range and data-attribute shenanigans - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>input range and data-attribute shenanigans</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: whitesmoke; padding: 1.5em;
}
.ranger { margin-bottom: 1.5em;
}
.slider { -webkit-appearance: none; height: 0.35em; background: lightsteelblue; border: 1px solid lightslategrey; display: inline-block; vertical-align: middle; margin: 0 1em;
}
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 1em; height: 1em; background: slategrey; outline: 1px solid hsla(0, 0%, 0%, 0.2); outline-offset: -1px;
}
[class$="Block"] { height: 3em; width: 3em; display: inline-block; vertical-align: middle; border: 1px solid lightslategrey; text-align: center; line-height: 3em; font-family: Monaco, monospace; letter-spacing: 1px;
}
.hslBlock { width: 15em; height: 3em;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="ranger"> <div class="hueBlock">HUE</div> <input type="range" min=1 max=360 value=1 class="hueSlider slider"><kbd class="hueReporter"></kbd>
</div>
<div class="ranger"> <div class="satBlock">SAT</div> <input type="range" min=1 max=100 value=50 class="satSlider slider"><kbd class="satReporter"></kbd>
</div>
<div class="ranger"> <div class="lumBlock">LUM</div> <input type="range" min=1 max=100 value=50 class="lumSlider slider"><kbd class="lumReporter"></kbd>
</div>
<div class="hslBlock"></div> <script src="js/index.js"></script>
</body>
</html>

Input range and data-attribute shenanigans - Script Codes CSS Codes

body { background: whitesmoke; padding: 1.5em;
}
.ranger { margin-bottom: 1.5em;
}
.slider { -webkit-appearance: none; height: 0.35em; background: lightsteelblue; border: 1px solid lightslategrey; display: inline-block; vertical-align: middle; margin: 0 1em;
}
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 1em; height: 1em; background: slategrey; outline: 1px solid hsla(0, 0%, 0%, 0.2); outline-offset: -1px;
}
[class$="Block"] { height: 3em; width: 3em; display: inline-block; vertical-align: middle; border: 1px solid lightslategrey; text-align: center; line-height: 3em; font-family: Monaco, monospace; letter-spacing: 1px;
}
.hslBlock { width: 15em; height: 3em;
}

Input range and data-attribute shenanigans - Script Codes JS Codes

// declare objects
prefixes = ['hue', 'sat', 'lum'];
sldrs = [];
rptrs = [];
blcks = [];
hslBlock = document.querySelector('.hslBlock');
// grab each slider, value reporter and color block
for (i = 0; i < 3; i++) { sldr = document.querySelector('.' + prefixes[i] + 'Slider'); rptr = document.querySelector('.' + prefixes[i] + 'Reporter'); blck = document.querySelector('.' + prefixes[i] + 'Block'); // push dom objects to arrays sldrs.push(sldr); rptrs.push(rptr); blcks.push(blck); // set initial value of reporter rptr.innerHTML = sldr.value;
}
// set initial block colors
colorMix();
// loop through each object and act on it
// can't be in the above loop for some weird scoping reason?
// http://stackoverflow.com/questions/6400320/javascript-array-addeventlistener
// variables? global scope? HOW DO I JAVASCRIPT
for (i = 0; i < 3; i++) { sldr = sldrs[i]; rptr = rptrs[i]; blck = blcks[i]; setListeners(sldr,rptr, blck);
}
function setListeners (sldr,rptr, blck) { sldr.addEventListener('change', function(){ updateValue(sldr,rptr); colorMix(sldr,blck); }, false);
};
function updateValue(sldr,rptr) { rptr.innerHTML = sldr.value;
};
function colorMix() { hslBlock.style.background = 'hsl(' + sldrs[0].value + ',' + sldrs[1].value + '%,' + sldrs[2].value + '%)'; blcks[0].style.backgroundColor = 'hsl(' + sldrs[0].value + ',90%, 50%)'; blcks[1].style.backgroundColor = 'hsl(' + sldrs[0].value + ',' + sldrs[1].value + '%, 50%)'; blcks[2].style.backgroundColor = 'hsl(1,0%,' + sldrs[2].value + '%)';
}
Input range and data-attribute shenanigans - Script Codes
Input range and data-attribute shenanigans - Script Codes
Home Page Home
Developer Zachary Kain
Username zakkain
Uploaded September 01, 2022
Rating 3
Size 3,014 Kb
Views 32,384
Do you need developer help for Input range and data-attribute shenanigans?

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!

Zachary Kain (zakkain) Script Codes
Name
Le Corbusier Colour Palettes
Infinite Nestable Dropdown Menu
Demonstrating Prism.js Highlighting Scss Problem
Decorative Gourd Season
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!