I want to transform the image vertically, horizontally and also scale the image using javascript. At the moment I manage to get the resize image to work but it doesn't look right. I am trying to have something similar to Transform image. when the move vertical bar is adjusted the image should move up and down and when the move horizontal is adjusted the image should move horizontally. At the moment the testresize() function is working with resizing the image but it doesn't look like what I want. I want to apply a CSS transform property containing translateX(), translateY() and scale() transforms to each of the image. Range Slider
<div id="toggle-components">
<fieldset>
<legend>Choose image to display</legend>
<input type="checkbox" id="mage1" onclick="if(this.checked){displayimg()}")><label for="image1">diving</label>
<input type="checkbox" id="mage2" onclick="if(this.checked){displaybgimage()}")><label for="image2">jumping</label>
</div>
<div id="container">
<img id="dolphin1" class="image" src="../images/img/image1.png" >
<img id="dolphin2" class="image" src="../images/img/image2.png" >
</div>
<div id="adjust-components">
<fieldset>
<legend>Adjust image</legend>
<label for="vertical-control">move vertical:</label>
<input id="vertical-control" type="range" min="-100" max="100" value="0"><br>
<label for="size-control">resizesize:</label>
<input id="size-control" type="range" min="-100" max="100" value="0" onChange="testresize(this.value)"><br>
<label for="horizontal-control">move horizontal:</label>
<input id="horizontal-control" type="range" min="-100" max="100" value="0"><br>
</fieldset>
</div>
var gettestimage=document.getElementsByClassName("image");
//resize image
function testresize(val){
for(var i=0;i<gettestimage.length;i++){
var chek1 = document.getElementById("image1");
var chek2 = document.getElementById("image2");
if(chek1.checked){
gettestimage[0].style.width=5*(val / 1)+'px';
console.log(val)
}else if(chek2.checked){
gettestimage[1].style.width=5*(val / 1)+'px';
}
If you want to set the transform css property then why are you setting width and height to scale the image? The solution is actually quite simple, I just had to to use the tansform property instead. This solution only works with a single image but I am sure you can manage to make it work with multiple.
var image = document.getElementById("image1")
//The transformation (scale, translation, rotation) of the image
var transform = {
translation: {
x: 0,
y: 0
},
scale: 1
};
function scaleImage(val){
transform.scale = val;
applyStyle()
}
function translateImage(axis, val){
transform.translation[axis] = val;
applyStyle()
}
function applyStyle() {
image.style.transform = `scale(${transform.scale}) translate(${transform.translation.x}px, ${transform.translation.y}px)`
}
<div id="container">
<img id="image1" class="image" src="https://www.w3schools.com/w3css/img_lights.jpg" width="500">
</div>
<div id="adjust-components">
<fieldset>
<legend>Adjust image</legend>
<label for="vertical-control">move vertical:</label>
<input id="vertical-control" type="range" min="-100" max="100" value="0" onchange="translateImage('y', this.value)"><br>
<label for="size-control">scale:</label>
<input id="size-control" type="range" min="0" max="2" value="1" step="0.1" onchange="scaleImage(this.value)"><br>
<label for="horizontal-control">move horizontal:</label>
<input id="horizontal-control" type="range" min="-100" max="100" value="0" onchange="translateImage('x', this.value)"><br>
</fieldset>
</div>
Related
I want the grayscale effect to increase when the ranger value is increased.
function change() {
const img = document.querySelector(".image");
const slider = document.querySelector(".range");
}
<input onchange="change()" type="range" class="range" min="1" max="100" value="1">
<img class="image" src="https://images.unsplash.com/photo-1499195333224-3ce974eecb47?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1248&q=80" alt="">
A bit new to this.
Thanks for your help.
You can set the grayscale as shown below value, and also change the event from onchange to oninput so that it is updated as soon as the slider is moved.
function change() {
const img = document.querySelector(".image");
const slider = document.querySelector(".range");
img.style.filter = `grayscale(${slider.value}%)`
}
<input oninput="change()" type="range" class="range" min="1" max="100" value="1">
<img class="image" src="https://images.unsplash.com/photo-1499195333224-3ce974eecb47?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1248&q=80" alt="">
Hi I have an hidden div with a range inside:
<div id="hiddencontainer" style="display:none;">
<input id="range1" type="range" min="1" max="10" step="1" name="rating" value="1" onmousemove="showrangevalue()"/>
</div>
This range works fine when it is displayed directly but I need to hidde this range and show it when user click on a specific button.
The problem is that after the user click on the "showing range" button, the range is displayed but impossible to read his value.
The demo and full code on jsbin:
http://jsbin.com/voyilovuya/3/
HTML
<div id="hiddencontainer" style="display:none;"><!-- try without display none -->
<input id="range1" type="range" min="1" max="10" step="1" name="rating" value="1" onmousemove="showrangevalue()"/>
</div>
<div id="container">
</div>
<div id="value">
</div>
<input type="button" value="Afficher" onClick="showhiddencontainer()"></input>
JS
function showrangevalue(){
document.getElementById("value").innerHTML=document.getElementById("range1").value;
}
function showhiddencontainer(){
document.getElementById("container").innerHTML=document.getElementById("hiddencontainer").innerHTML;
}
Have you a solution? Thanks for your help!
see this http://jsfiddle.net/g03srawu/1/,
you are duplicating the range element in container, so there are two range inputs with same ids,
This will show the values in the hidden element inside .value div. replace it with class, and then you can use it.
HTML:
<div id="hiddencontainer" style="display:none;"><!-- try without display none -->
<input class="range1" type="range" min="1" max="10" step="1" name="rating" value="1" onmousemove="showrangevalue()"/>
</div>
<div id="container">
</div>
value:
<div id="value">
</div>
<input type="button" value="Showing range" onClick="showhiddencontainer()"></input>
JS:
function showrangevalue(){
document.getElementById("value").innerHTML=document.querySelectorAll(".range1")[1].value;
}
function showhiddencontainer(){
document.getElementById("container").innerHTML=document.getElementById("hiddencontainer").innerHTML;
}
Try replacing
function showhiddencontainer(){
document.getElementById("container").innerHTML=
document.getElementById("hiddencontainer").innerHTML;
}
with
function showhiddencontainer(){
document.getElementById("hiddencontainer").style.display = "block";
}
unless you have a reason to copy your container over?
The two slider in html format.
<!--Saturation Slider-->
<input id="Hslide" type="range" min="0.0" max="2.0" value="1.0" step="0.01" oninput="showValue(value)" />
<!--Brightness Slider-->
<input id="Vslide" type="range" min="0" max="2" value="1" step="0.1" orient="vertical" oninput="showValue(value)" />
and the scripting,
<script type="text/javascript">
function showValue(slideAmount)
{
var pic = $('.effects').val();
$('#pic').css('-webkit-filter', 'saturate('+slideAmount+')');
$('#range').val(slideAmount);
document.getElementById("Hslide").setAttribute("style","-webkit-filter:saturate(" + value + "%)");
}
function showValue(slideAmount1)
{
var pic = $('effects').val();
$('#pic').css('-webkit-filter', 'brightness('+slideAmount1+')');
$('#range').val(slideAmount1);
document.getElementById("Vslide").setAttribute("style","-webkit-filter:saturate(" + value + "%)");
}
</script>
The problem: Whenever I slide and change the saturation AND then change the brightness, the image filter value resets before applying the second filter changes that i made. If there a way to to apply two filter to an image?
I have a html5 range input and a text box input. When the range changes, the text box will get updated. But what should I do so that when I put a number in the text box, the range input gets updated?
This is my current code:
<div>
<input id="slider" type="range" min="0" max="200" />
<input id="box" type="text" value="0"/>
</div>
<script>
var slider = document.getElementById('slider');
$('#box').change(function(){slider.value=parseInt(this.value)});
</script>
When I edit my text box, my slider (range input) does NOT change. What am I doing wrong? Can it be that I shouldn't be using slider.value to update the slider? If that is the reason, what is the correct way to do that?
Hey Everyone Those who don't know , we don't need any js or jquery for this
<form>
<div>
<input id="rangeInput" type="range" min="0" max="200" oninput="amount.value=rangeInput.value" />
<input id="amount" type="number" value="100" min="0" max="200" oninput="rangeInput.value=amount.value" />
</div>
</form>
It's a simple script, just do this:
<label for=range1>Slide, then press "Click to search slider value"</label>
<span>-1000 </span><input type="range" id="slide1" min="-1000" max="1000" value=0 step=0.25 onchange="printValue('slide1', 'rangeValue1')"><span> 1000 </span>
<i><input type=text id="rangeValue1" value=0 width=25% onchange="slideValue('slide1', 'rangeValue1');"><span> is the value of the slider now</span></i><br/><br/>
<script>
function printValue(sliderID, spanbox) {
var x = document.getElementById(spanbox);
var y = document.getElementById(sliderID);
x.value = y.value;
}
function slideValue(sliderID, spanbox){
var x = document.getElementById(spanbox);
var y = document.getElementById(sliderID);
y.value = parseInt(x.value);
}
window.onload = function() { printValue('slide1', 'rangeValue1'); }
</script>
(Of course, this only works when you press enter and submit the value to the "onchange")
in my side I did it in just Javascript and adding a onchange event.
I also added the value=0 to range so that make it start at the beguining.
<div>
<input id="slider" type="range" min="0" max="200" value="0"/>
<input id="box" type="text" value="0"/>
</div>
var slider = document.getElementById('slider');
var box = document.getElementById("box");
slider.onchange = function(){
box.value = slider.value;
}
And add this if you want to make it work on both side
box.onkeyup = function(){
slider.value = box.value;
}
This fiddle works:
var slider = document.getElementById('slider');
$('#box').change(function(){
slider.value=parseInt(this.value);
});
(So that's your current code, actually. Did you import the jQuery library?)
Keep in mind that you've set the slider's range to 200. Try some values between 0 and 200.
It's actually quite easy. It's all written in jQuery Tools API documentation. So I changed my code to this and it worked:
<div>
<input id="slider" type="range" min="0" max="200" />
<input id="box" type="text" value="0"/>
</div>
<script>
var sliderapi = $("#slider").data("rangeinput");
$('#box').change(function(){sliderapi.setValue(parseInt(this.value))});
</script>
$('#box').change(function(){
$('#slider').attr({"value":parseInt(this.value)});
});
Might work.
Currently, if you set the slider max value 100, when you type in 150 in the input box it automatically adjusts to 100.
I want the max value only applies to the slider bar but not the related input box, anyway I can do that?
updated...
after trying out a few options, this could be one solution
$(document).ready(function() {
$('.testSlider').bind('change', function() {
var val = $(this).val();
$(this).siblings('.testInput').val(val);
});
});
.ui-slider-input {
display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="text" class="testInput" style="width:20px; float: left" />
<input type="range" class="testSlider" name="slider" id="slider-0" value="60" min="0" max="100" />
</div>
<div>
<input type="text" style="width:20px;float: left" class="testInput" />
<input type="range" class="testSlider" name="slider" id="slider-0" value="60" min="0" max="100" />
</div>