I am trying to change the range slider lower color depends upon the slide. Using below code.
<head>
</head>
<input type="range" min="1" max="100" step="1" value="15"id="myrange" class="myrange">
CSS:
input[type="range"] {
width: 100%;
height: 28px;
-webkit-appearance: none;
outline: none;
border: 0; /*for firefox on android*/
padding: 0 8px; /*for IE*/
margin: 8px 0;
}
/*chrome and opera*/
input[type="range"]::-webkit-slider-runnable-track {
height: 8px;
border-radius: 4px;
transition: 0.3s;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.15, orange),
color-stop(0.15, #C5C5C5)
);
}
.myrange::-webkit-slider-runnable-track {
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.15, orange),
color-stop(0.15, #C5C5C5)
);
height: 8px; /*trackHeight*/
border-radius: 4px; /*trackHeight*/
transition: 0.3s;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background: orange;
width: 28px;
height: 28px;
border-radius: 50%;
margin-top: -12px;
cursor: pointer;
border: 4px solid #fff;
transition: 0.3s;
}
javascript:
var style = $("<style>", {type:"text/css"}).appendTo("head");
$(function() {
$('input[type="range"]').on('input change', function() {
var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
style.text('.myrange::-webkit-slider-runnable-track{background-image:-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', orange), '+ 'color-stop(' + val + ', gray);}');
});
});
I would like to update the CSS for input[type="range"]::-webkit-slider-runnable-track while using the slider.
I have verified the previous post how to call range::-webkit-slider-runnable-track? on same topic and edited my code accordingly. Really appreciate if someone can help me to identify the issue with code
Fiddle : https://jsfiddle.net/fwmscany/1/
This is working now. Here is the update I made to Javascript
$(function() {
var style = $("<style>", {type:"text/css"}).appendTo("head");
$('input[type="range"]').on('input change', function() {
var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
$('<style type="text/css"></style>').text('input[type="range"]::-webkit-slider-runnable-track { background-image:-webkit-gradient(linear, left top, right top, color-stop('+val+', orange), color-stop('+val+', #C5C5C5));}').appendTo('head');
});
});
Related
I have built a custom cursor, but im having an issue with its position when you scroll the page. Rather than following the mouse cursor, it stays where it was on the page until you move the mouse again and then it catches up.
let mouseCursor = document.querySelector(".cursor");
window.addEventListener('DOMContentLoaded', cursor);
window.addEventListener('mousemove', cursor);
document.addEventListener('mouseenter', () => mouseCursor.style.display = 'block');
document.addEventListener('mouseleave', () => mouseCursor.style.display = 'none');
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
jQuery('.cursor').remove();
} else {
mouseCursor.style.display = 'block';
}
function cursor(e){
mouseCursor.style.top = "calc(" +e.pageY + "px - 1rem)";
mouseCursor.style.left = "calc(" +e.pageX + "px - 1rem)";
}
.section{
height:200vh;
}
.cursor{
display:none;
width: 20px;
height: 20px;
border: 2px solid #f2f2f2;
outline: 2px solid #000;
border-radius: 50%;
position: absolute;
transition: all 0.3s ease;
transition-property: background, transform;
transform-origin: center center;
z-index: 20000;
pointer-events: none;
}
<div class="cursor"></div>
<div class="section"></div>
You need to work with clientX/Y property not pageX/Y.
Because clientX/Y coordinates are relative to the top left corner of the visible part of the page, while pageX/Y is relative to the top left corner of the whole page.
Also, Instead of making your circle position:absolute , you have to change it to position:fixed;
Elements with fixed positioning are fixed with respect to the viewport
CSS absolute and fixed positioning
let mouseCursor = document.querySelector(".cursor");
window.addEventListener('DOMContentLoaded', cursor);
window.addEventListener('mousemove', cursor);
document.addEventListener('mouseenter', () => mouseCursor.style.display = 'block');
document.addEventListener('mouseleave', () => mouseCursor.style.display = 'none');
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
jQuery('.cursor').remove();
} else {
mouseCursor.style.display = 'block';
}
function cursor(e){
mouseCursor.style.top = "calc(" +e.clientY + "px - 1rem)";
mouseCursor.style.left = "calc(" +e.clientX + "px - 1rem)";
}
.section{
height:200vh;
}
.cursor{
display:none;
width: 20px;
height: 20px;
border: 2px solid #f2f2f2;
outline: 2px solid #000;
border-radius: 50%;
position: fixed;
transition: all 0.3s ease;
transition-property: background, transform;
transform-origin: center center;
z-index: 20000;
pointer-events: none;
}
<div class="cursor"></div>
<div class="section"></div>
I have a custom cursor on my site that I want to hide on touch devices (mobile/tablet). I have successfully done this but for a split second when you visit the website the cursor appears in the top left corner then is hidden. Is there any way to stop it displaying at all?
This is the code im using to remove the ID of the cursor on touch devices.
jQuery(document).ready(function($) {
{
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
$('#custom-cursor').remove();
}
}
});
jQuery(document).ready(function($) {
let cursor = document.querySelector('#custom-cursor');
document.addEventListener('mousemove', evt => {
let { clientX: x, clientY: y } = evt;
let scale = 1;
if (evt.target.matches('a,span,[onclick],img,video,i')) {
cursor.classList.add('active');
scale = 0.5;
} else {
cursor.classList.remove('active');
}
cursor.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;
});
});
* {
cursor: none;
}
#custom-cursor {
position: fixed;
width: 20px; height: 20px;
top: -10px;
left: -10px;
border: 2px solid black;
border-radius: 50%;
opacity: 1;
background-color: #fb4d98;
pointer-events: none;
z-index: 99999999;
transition:
transform ease-out 0.15s,
border 0.5s,
opacity 0.5s,
background-color 0.5s;
}
#custom-cursor.active {
opacity: 0.5;
background-color: #000;
border: 2px solid #fb4d98;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="custom-cursor"></div>
Without seeing more of your code it's not possible to be absolutely sure, but from the info in the question it looks as though the whole page is loaded before the cursor is removed.
You could tackle this in a variety of ways, for example not having the cursor element in the initial HTML but adding it if required onload.
Alternatively you could leave your initial HTML as it is, but set the cursor to have display: none in your CSS. Then onload the JS adds setting the style.display to block if the cursor is not to be removed.
UPDATE: now having seen more of the code here is a snippet to show how the second method (cursor to have display: none until the page is loaded) might be implemented:
jQuery(document).ready(function($) {
let cursor = document.querySelector('#custom-cursor');
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
$('#custom-cursor').remove();
}
else { cursor.style.display = 'block';}
document.addEventListener('mousemove', evt => {
let { clientX: x, clientY: y } = evt;
let scale = 1;
if (evt.target.matches('a,span,[onclick],img,video,i')) {
cursor.classList.add('active');
scale = 0.5;
} else {
cursor.classList.remove('active');
}
cursor.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;
});
});
* {
cursor: none;
}
#custom-cursor {
position: fixed;
width: 20px; height: 20px;
top: -10px;
left: -10px;
border: 2px solid black;
border-radius: 50%;
opacity: 1;
background-color: #fb4d98;
pointer-events: none;
z-index: 99999999;
transition:
transform ease-out 0.15s,
border 0.5s,
opacity 0.5s,
background-color 0.5s;
display: none;
}
#custom-cursor.active {
opacity: 0.5;
background-color: #000;
border: 2px solid #fb4d98;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="custom-cursor"></div>
So I have a custom js cursor ( which follows the mouse cursor with a delay ) which has a background color of #000 and mix-blend-mode set to difference. My body background color and text is set to #fff. Now, I have a p tag with the text "HELLO" which I want to be visible just the words "H" and "O", so I created a span which color's is set to #000. When I hover over the P tag, because of the mix-blend-mode, I can see the "ELL" words as I wanted, but the words "H" and "O" get " invisible ". How can I make them be visible when the cursor gets over it? ( just the part of each word which is being hovered by the cursor, not the entire word, IF the cursor doesn't cover the entire word )
Is there any solution? I tryed to change the color of the "H" and "O" on mouseenter/mouseleave but it doesn't work as expected.
const cursor = document.querySelector('.cursor')
const wuc = document.querySelectorAll('.wuc')
document.addEventListener('mousemove', e => {
cursor.setAttribute('style', 'top: ' + e.clientY+'px; left: '+e.clientX+'px;')
})
wuc.forEach((wuc) => {
wuc.addEventListener('mouseenter', () => {
wuc.style.color = '#fff'
})
wuc.addEventListener('mouseleave', () => {
wuc.style.color = '#000'
})
})
body {
background-color: #fff;
color: #fff;
}
.cursor {
width: 5vw;
height: 5vw;
transform: translate(-2.5vw, -2.5vw);
position: fixed;
transition-duration: 200ms;
transition-timing-function: ease-out;
background-color: #000;
border-radius: 50%;
mix-blend-mode: difference;
}
p {
margin-left: 30vw;
margin-top: 40vh;
}
.wuc {
color: #000;
}
<div class="cursor"></div>
<p class="container">
<span class="wuc">H</span>ELL<span class="wuc">O</span>
</p>
I would color the text using a radial-gradient that follow the same position of your custom cursor
const cursor = document.querySelector('.cursor')
document.addEventListener('mousemove', e => {
cursor.setAttribute('style', 'top: ' + e.clientY + 'px; left: ' + e.clientX + 'px;');
document.body.setAttribute('style', '--x: ' + e.clientX + 'px;--y:' + e.clientY + 'px;');
})
body {
background-color: #fff;
color: #fff;
}
.cursor {
width: 5vw;
height: 5vw;
transform: translate(-2.5vw, -2.5vw);
position: fixed;
transition-duration: 200ms;
transition-timing-function: ease-out;
background-color: #000;
border-radius: 50%;
mix-blend-mode: difference;
}
p {
margin-left: 30vw;
margin-top: 40vh;
}
.wuc {
background:
radial-gradient(farthest-side, #fff 99.5%, #000 100%) calc(var(--x,0px) - 2.5vw) calc(var(--y,0px) - 2.5vw)/5vw 5vw fixed no-repeat,
#000;
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color: transparent;
color:transparent;
}
<div class="cursor"></div>
<p class="container">
<span class="wuc">H</span>ELL<span class="wuc">O</span>
</p>
I have already gone through the following questions and none of those have the answer i want :- (So please don't link them and mark this as duplicate).
Using JavaScript to edit CSS gradient
Is there a way to style HTML5's range control?
How to customize the HTML5 input range type looks using CSS?
Change color of input range slider with javascript [duplicate]
I have three sliders like this.
They are RGB sliders for which i have used gradient.
In red slider green and blue value is 0. i.e gradient value of red slider : rgb(0,0,0) to rgb(255,0,0).
I want to change the gradient of blue slider and green slider as i slide red slider using javascript.
If i change red value to 120.
Then in blue slider the gradient must be changed from rgb(old_red_value,0,old_green_value) to rgb(changed_red_value,255,old_green_value)
It is used to define color to a div.
<head>
<style type="text/css">
.slider {
display: inline;
-webkit-appearance: none;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
-webkit-transition: .2s;
transition: opacity .2s;
width: 80%;
margin-left: 5%;
}
#red_slider{
background: linear-gradient(to right, rgb(0,0,0) , rgb(255,0,0) );
}
#green_slider{
background: linear-gradient(to right, rgb(0,0,0) , rgb(0,255,0) );
}
#blue_slider{
background: linear-gradient(to right, rgb(0,0,0) , rgb(0,0,255) );
}
</style>
</head>
<body>
<input type="range" min="0" max="255" value="127" class="slider" id="red_slider">
<p>Red: <span id="red_value"></span></p>
<input type="range" min="0" max="255" value="127" class="slider" id="green_slider">
<p>Green: <span id="green_value"></span></p>
<input type="range" min="0" max="255" value="127" class="slider" id="blue_slider">
<p>Blue: <span id="blue_value"></span></p>
<script type="text/javascript">
var red_slider = document.getElementById("red_slider");
var green_slider = document.getElementById("green_slider");
var blue_slider = document.getElementById("blue_slider");
var red_output = document.getElementById("red_value");
var green_output = document.getElementById("green_value");
var blue_output = document.getElementById("blue_value");
red_output.innerHTML = red_slider.value;
green_output.innerHTML = green_slider.value;
blue_output.innerHTML = blue_slider.value;
var red_val = red_slider.value;
var green_val = green_slider.value;
var blue_val = blue_slider.value;
red_slider.oninput = function() {
red_output.innerHTML = this.value;
red_val = this.value;
disp.style.backgroundColor = "rgb("+red_val+","+green_val+","+blue_val+")";
rgb_value.innerHTML = "rgb("+red_val+","+green_val+","+blue_val+")";
// hex_value.innerHTML = "hex("+red_val.toString(16) +","+green_val.toString(16) +","+blue_val.toString(16) +")";
// blue_slider.style.background = "black";
// blue_slider.css{
// background: linear-gradient(to right, rgb($red_val,0,0) , rgb($red_val,0,255) );
// }
// blue_slider.style.background = "linear-gradient(to right, rgb("+red_val+",0,0) , rgb("+red_val+",0,255) );";
}
green_slider.oninput = function() {
green_output.innerHTML = this.value;
green_val = this.value;
disp.style.backgroundColor = "rgb("+red_val+","+green_val+","+blue_val+")";
rgb_value.innerHTML = "rgb("+red_val+","+green_val+","+blue_val+")";
// hex_value.innerHTML = "rgb("+red_val+","+green_val+","+blue_val+")";
}
blue_slider.oninput = function() {
blue_output.innerHTML = this.value;
blue_val = this.value;
disp.style.backgroundColor = "rgb("+red_val+","+green_val+","+blue_val+")";
rgb_value.innerHTML = "rgb("+red_val+","+green_val+","+blue_val+")";
// hex_value.innerHTML = "rgb("+red_val+","+green_val+","+blue_val+")";
}
</script>
I can change it to a fixed colour using js -
blue_slider.style.background = "black";, but my question is to change it to a different color gradient using js.
In this case I would consider CSS variables to simplify the code. The idea is to change the color variable using JS and the code will be reduced.
Then you can adjust the gradient color by using the variable in the needed place and using only CSS:
var red_slider = document.getElementById("red_slider");
var green_slider = document.getElementById("green_slider");
var blue_slider = document.getElementById("blue_slider");
var red_output = document.getElementById("red_value");
var green_output = document.getElementById("green_value");
var blue_output = document.getElementById("blue_value");
red_slider.oninput = function() {
red_output.innerHTML = this.value;
document.documentElement.style.setProperty('--red-color', this.value);
}
green_slider.oninput = function() {
green_output.innerHTML = this.value;
document.documentElement.style.setProperty('--green-color', this.value);
}
blue_slider.oninput = function() {
blue_output.innerHTML = this.value;
document.documentElement.style.setProperty('--blue-color', this.value);
}
:root {
--red-color:127;
--blue-color:127;
--green-color:127;
}
.slider {
display: inline;
-webkit-appearance: none;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
-webkit-transition: .2s;
transition: opacity .2s;
width: 80%;
margin-left: 5%;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
#rgb_value_container {
/*margin: 16px auto;*/
text-align: center;
font-weight: bold;
font-size: 20px;
}
#red_slider {
background: linear-gradient(to right, rgb(0, 0, 0), rgb(255, var(--green-color), var(--blue-color)));
}
#green_slider {
background: linear-gradient(to right, rgb(0, 0, 0), rgb(var(--red-color), 255, var(--blue-color)));
}
#blue_slider {
background: linear-gradient(to right, rgb(0, 0, 0), rgb(var(--red-color), var(--green-color), 255));
}
#color_box {
width: 250px;
height: 250px;
margin: 30px auto;
background-color: rgb(var(--red-color), var(--green-color), var(--blue-color));
}
<div id="color_box"></div>
<input type="range" min="0" max="255" value="127" class="slider" id="red_slider">
<p>Red: <span id="red_value">127</span></p>
<input type="range" min="0" max="255" value="127" class="slider" id="green_slider">
<p>Green: <span id="green_value">127</span></p>
<input type="range" min="0" max="255" value="127" class="slider" id="blue_slider">
<p>Blue: <span id="blue_value">127</span></p>
I want to style the bar before the thumb with a different color on a range input. I'v tried looking for a solution but I havent found a proper solution. This is what I need it to look like:
Chrome doesnt seem to support input[type='range']::-webkit-slider-thumb:before anymore and I am at a loss how to style it. Here's what I have so far:
input[type='range'] {
min-width: 100px;
max-width: 200px;
&::-webkit-slider-thumb {
-webkit-appearance: none !important;
background-color: #white;
border: 1px solid #gray-4;
height: 14px;
width: 14px;
&:hover,
&:focus,
&:active {
border-color: #blue;
background-color: #gray-2;
}
}
&::-webkit-slider-runnable-track {
background-color: #gray-2;
border: 1px solid #gray-4;
}
}
document.querySelectorAll(".__range").forEach(function(el) {
el.oninput =function(){
var valPercent = (el.valueAsNumber - parseInt(el.min)) /
(parseInt(el.max) - parseInt(el.min));
var style = 'background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop('+ valPercent+', #29907f), color-stop('+ valPercent+', #f5f6f8));';
el.style = style;
};
el.oninput();
});
.__range{
margin:30px 0 20px 0;
-webkit-appearance: none;
background-color: #f5f6f8;
height: 3px;
width: 100%;
margin: 10px auto;
}
.__range:focus{
outline:none;
}
.__range::-webkit-slider-thumb{
-webkit-appearance: none;
width: 20px;
height: 20px;
background: #29907f;
border-radius: 50%;
cursor: -moz-grab;
cursor: -webkit-grab;
}
<input class="__range" id="rng" name="rng" value="30" type="range" max="100" min="1" value="100" step="1">
The trick in the post referenced by shambalambala is clever, but I don't think it will work in this case if you want to get something that looks exactly like the image you show. The approach there is to put a shadow on the thumb to create the different coloring to the left of the thumb. Since the shadow extends in the vertical, as well as the horizontal, direction, you also have to add overflow:hidden to the range or the track in order to clip the shadow. Unfortunately, this also clips the thumb. So if you want a thumb that extends beyond the track in the vertical dimension, such as in the image you show where the thumb is a circle with a diameter larger than the track width, this won't work.
I'm not sure there's a pure CSS solution to this problem. With JavaScript, one way around this is to make two range elements that overlap exactly. For one range element, you will see only the thumb and for one you will see only the track. You can use the shadow approach on the track element to get the different color before the thumb. You can style the thumb on the thumb range however you want, and since overflow is not set to hidden for this range element, it can extend beyond the width of the track. You can then use JavaScript to yoke the two range elements together, so that when you move the thumb on the thumb-visible element, the value of the track-visible element also changes.
For example (works in webkit browsers--will need some additional styling for other browsers):
<html>
<head>
<style>
.styled_range {
position: relative;
padding: 10px;
}
input[type=range] {
-webkit-appearance: none;
width: 600px;
background: transparent;
position: absolute;
top: 0;
left: 0;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 12px;
}
.track_range {
pointer-events: none;
}
.track_range::-webkit-slider-runnable-track {
background: #D0D0D0;
border-radius: 6px;
overflow: hidden;
}
.track_range::-webkit-slider-thumb {
-webkit-appearance: none;
background: transparent;
height: 1px;
width: 1px;
box-shadow: -600px 0 0 600px #666666;
}
.thumb_range::-webkit-slider-runnable-track {
background: transparent;
cursor: pointer;
}
.thumb_range::-webkit-slider-thumb {
-webkit-appearance: none;
border: 3px solid #ffffff;
border-radius: 20px;
height: 40px;
width: 40px;
background: #1180AD;
cursor: pointer;
margin: -12px 0px 0px 0px;
}
</style>
</head>
<body>
<form>
<div class="styled_range">
<input type="range" class="track_range"/>
<input type="range" class="thumb_range"/>
</div>
<br/>
<div class="styled_range">
<input type="range" class="track_range"/>
<input type="range" class="thumb_range"/>
</div>
</form>
</body>
<script>
window.onload = function() {
var styledRanges = document.getElementsByClassName('styled_range');
for (var i=0; i<styledRanges.length; i++) {
var thumbRange = null, trackRange = null;
for (var j=0; j<styledRanges[i].children.length; j++) {
var child = styledRanges[i].children[j];
if (child.className === 'thumb_range')
var thumbRange = child;
else if (child.className === 'track_range')
var trackRange = child;
}
thumbRange.oninput = function(thumbRange, trackRange) {
return function(e) {
trackRange.value = thumbRange.value;
};
}(thumbRange, trackRange);
}
}
</script>
</html>