I have this element in my HTML
<div class="slider-wrapper">
<input type="range" min="-10" max="100" value="1" step="0.01">
</div>
And my JS
'input input[type="range"]': function(event, template) {
var sliderVal = $( event.currentTarget ).val();
Session.set('scaler', sliderVal);
console.log("Slider: " + sliderVal);
}
I tried to change the class name of my element so I can add another input range slider mapped to a new event but it doesn't seem to work. How to add another one, changing input[type="range"] to scale[type="range"] and amend the element's class name won't work.
Template:
Each of your sliders is given a unique id. This id is what is going to tell one slider apart from the other.
<div class="slider-wrapper">
<input type="range" min="-10" max="100" id="slider1" value="1" step="0.01">
<input type="range" min="-10" max="100" id="slider2" value="1" step="0.01">
<input type="range" min="-10" max="100" id="slider3" value="1" step="0.01">
</div>
Event handlers:
A single event handler that does the job of picking up changes on any of the sliders.
// when anything in input[type="range"] changes,
'change input[type="range"]' (event){
console.log("id of the slider is: ", event.target.id);
console.log("it's current value is: ", event.target.value);
// set the id and it's value - which can be used later for whatever you want to do.
Session.set(event.target.id, event.target.value);
},
Session.get("slider1") ==> gets the slider1's current value
Session.get("slider2") ==> gets the slider2's current value
Session.get("slider3") ==> gets the slider3's current value
Okay, it seems that I was missing a hashtag to the event selector.
<div class="slider-wrapper">
<input id="scale" type="range" min="-1" max="1" value="1" step="0.01">
</div>
<div class="slider-wrapper">
<input id="offset" type="range" min="1" max="100" value="1" step="0.01">
</div>
'input #scale[type="range"]': function(event, template) {
var sliderVal = $( event.currentTarget ).val();
Session.set('scaler', sliderVal);
console.log("Slider: " + sliderVal);
},
'input #offset[type="range"]': function(event, template) {
var sliderVal = $( event.currentTarget ).val();
Session.set('offset', sliderVal);
console.log("Slider: " + sliderVal);
}
Related
Hey I'm want to sync 2 inputs so if someone change the slider then should also change the number input and the other way round I know there are other answered Question but the did not work form me because it is important not to change any class names or ids only the number input sync with the slider but not also the other way round my code is:
<div class="slidecontainer">
<input type="range" min="0.25" max="5" value="1" step="0.25" class="slider" id="playbackSpeed">
<input type="number" value="1" class="number" id="playbackSpeed" placeholder="1,0">
</div>
my js is
document
.querySelector(".slider")
.addEventListener("input", updateValue);
document
.getElementsByClassName("number")
.addEventListener("input", updateValue);
function updateValue(e) {
var sibling =
e.target.previousElementSibling ||
e.target.nextElementSibling;
sibling.value = e.target.value;
}
You can even shorten the whole thing to:
const inputs=[...document.querySelectorAll("input")];
inputs.forEach((inp,i)=>inp.addEventListener("input",()=>
inputs[1-i].value=inputs[i].value )
)
<div class="slidecontainer">
<input type="range" min="0.25" max="5" value="1" step="0.25" class="slider" id="playbackSpeed">
<input type="number" value="1" class="number" id="playbackSpeed" placeholder="1,0">
</div>
let range=document.querySelector("input[type=range]");
let number=document.querySelector('input[type=number]')
range.addEventListener("change",(e)=>{
number.value=e.target.value;
})
number.addEventListener("change",(e)=>{
range.value=e.target.value;
})
For more goto: https://codepen.io/Gangster_sCode/pen/abNKJMm
i am very new to JS and strugle with the following problem:
I want wo convert the value in the numberbox in the answer beside by any change of the value. Including the variables NP0, NP1 and DP0 from the HTML element.
-------------------------UPDATE 1--------------------------
To use html variables in javascript we can do this via data-* attributes. Thanks to Luca.
But how can I intitiate a calculation, when the page is loading for the first time?
And how can the calculation be executed on any change of the value?
$(".slide").on('change mousemove', function() {
$(this).next(".text").text(this.value)
});
$(".calc").on('change paste keyup', function() {
$(this).next(".text").text((128+(this.value*0.0625))/1)
});
<script src="http://code.jquery.com/jquery-2.2.2.min.js"></script>
<input name="period" class="slide" value="0.25" min="0" max="0.5" step="0.01" style="width: 15em;" type="range"><label class="text">0.25</label>
<br>
<br>
<input name="period" class="calc" value="0" min="0" max="4096" type="number" NP0="128" NP1="0.00625" DP0="1">= <label class="text"></label> km/h
You need data-* attributes, so your HTML should be
<input name="period" class="slide" value="0.25" min="0" max="0.5" step="0.01" style="width: 15em;" type="range"><label class="text">0.25</label>
<br>
<br>
<input name="period" class="calc" value="0" min="0" max="4096" type="number" data-NP0="128" data-NP1="0.00625" data-DP0="1">= <label class="text"></label> km/h
and your script
$(".slide").on('change mousemove', function() {
$(this).next(".text").text(this.value)
});
$(".calc").on('change paste keyup', function() {
$(this).next(".text").text(($(this).data("np0")+(this.value*$(this).data("np1")))/$(this).data("dp0"))
});
UPDATE 1
To compute your value immediately when you subscribe needed events, you can use trigger to force a "change" event, so your script should be
$('.calc').on('change paste keyup', function(){
$(this).next(".text").text(($(this).data("np0")+(this.value*$(this).data("np1")))/$(this).data("dp0"));
}).trigger('change');
Sorry I miss a point :)
To get continuous compute while spinning with buttons, you can add the "input" event, so your code become
$('.calc').on('change paste keyup input', function(){
$(this).next(".text").text(($(this).data("np0")+(this.value*$(this).data("np1")))/$(this).data("dp0"));
}).trigger('change');
I updated the fiddle, again
Here a jsfiddle
<html>
<head>
<script src="http://code.jquery.com/jquery-2.2.2.min.js">/script>
<script type="text/javascript">
function Load(){
$(document).ready(function(){
$(".slide").on('change mousemove', function() {
$(this).next(".text").text(this.value);
});
$(".calc").on('change paste keyup', function() {
var value = $('#abc').val();
$(this).next(".text").text((128+ value*0.0625)/1)
});
});
}
</script>
</head>
<body onLoad="Load()">
<input id="period" name="period" class="slide" value="0.25" min="0" max="0.5" step="0.01" style="width: 15em;" type="range">
<label class="text">0.25</label> <br><br>
<input id ="abc" name="period" class="calc" value="0" min="0" max="4096" type="number" NP0="128" NP1="0.00625" DP0="1">=
<label class="text"></label> km/h
</body>
</html>
you can use id and get the value through it will update for hope it will help
I would like to save in code space. Is there a short code I can enter in the 'onchange' inline to have the two range elements affect each other by moving just one of them?
<form onchange="">
<input type="range" value="0" id="rangeA" name="rangeA" min="-10" max="10">
</form>
<form onchange="">
<input type="range" value="0" id="rangeB" name="rangeB" min="-10" max="10">
</form>
You simply attach the same event handler to both forms. the event handler will simply check which form's range has changed, and will change the other form's range accordingly. you could theoretically have hundreds of those forms with ranges, and one of them will change the rest using this same event handler:
//on dom ready
$(function() {
//attach a change event listener to all forms
$("form").on("change", function() {
//for each of those forms do the following on change:
//assign a $currForm to point at the current form
$currForm = $(this);
//get a list of all other forms and change their range
//when the range of the current form changes
$("form").filter(function() {
//compares all forms with the current one and returns the others
return $(this) != $currForm;
}).children("input[type=range]").val($currForm.children("input[type=range]").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="range" value="0" id="rangeA" name="rangeA" min="-10" max="10">
</form>
<form>
<input type="range" value="0" id="rangeB" name="rangeB" min="-10" max="10">
</form>
<form>
<input type="range" value="0" id="rangeC" name="rangeC" min="-10" max="10">
</form>
<form>
<input type="range" value="0" id="rangeD" name="rangeD" min="-10" max="10">
</form>
<form>
<input type="range" value="0" id="rangeE" name="rangeE" min="-10" max="10">
</form>
Having an html input range values from 0 - 100 , how can i attach an event listener to specific values?
For example, when reaching values of 45, change the background color.
<input id="myrange" type="range" min="0" max="100" />
With jQuery
$("#myRange").change(onSlideChange);
function onSlideChange(){
var val = $("#myRange").val();
if(val==45){
$("#result").text("It's 45");
}else{
$("#result").text("It's another value ("+val+")");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" id="myRange" value="90">
<div id="result"></div>
Try this
Html
<input type="range" id="myRange" value="90" onchange="showVal(this.value)">
Js
function showVal(val){
if(val==45){
alert("It's 45");
}else{
alert("It's "+val);
}
}
Here, Instead of showing alert, you can do whatever you want :)
Hey having a little trouble jquery and the hmtl5 range. I'm try to get the values as they changed but the event listener is not capturing it. Currently my code is:
HTML
html += '<li>Apply Credits: <input type="range" min="0" max="'+credits+'" name="discount_credits" id="discount_credits" /> <span>'+credits+'</span></li>'
And the JS is:
$('#discount_credits').mousewheel( function() {
alert('it changed!');
alert('new value = ' + $(this).val());
});
I've also tried
$('#discount_credits').change( function() {
alert('it changed!');
alert('new value = ' + $(this).val());
});
Neither seem to work. Am I doing something wrong?
$('input[type=range]').on('input', function () {
$(this).trigger('change');
});
This fires the change event on every input event.
Does not seem to have any problem on HTML5 <input type="range"> using change.
See: http://jsfiddle.net/DerekL/BaEar/33/
I assume your span has an id: <span id="slidernumber">...</span>
Lets also assume that you have a few sliders, and you want to see a text change if any of them were moved:
<li>
Apply Credits1:
<input type="range" min="0" max="100"
name="discount_credits1" id="discount_credits"
/>
</li>
<li>
Apply Credits2:
<input type="range" min="0" max="100"
name="discount_credits2" id="discount_credits"
/>
</li>
<span id="slidernumber">50</span>
Try this:
$(document).ready(function(){
$("[type=range]").change(function(){
var newval=$(this).val();
$("#slidernumber").text(newval);
});
});
http://jsfiddle.net/MahshidZeinaly/CgQ5c/
Now lets assume that you have a few sliders, but you want to see a text change if a particular one of them were moved. (I assume it because the range input is inside li tag, and you gave it a name):
<li>
Apply Credits1:
<input type="range" min="0" max="100"
name="discount_credits1" id="discount_credits"
/>
<span id="slidernumber">50</span>
</li>
<li>
Apply Credits2:
<input type="range" min="0" max="100"
name="discount_credits2" id="discount_credits"
/>
<span id="slidernumber">50</span>
</li>
Try this:
$(document).ready(function(){
$("[type=range]").change(function(){
var newv=$(this).val();
$(this).next().text(newv);
});
});
http://jsfiddle.net/MahshidZeinaly/2pe7P/1/
The on change event seems to be working correctly for me: http://jsfiddle.net/zV3xD/7/
<input type="range" min="0" max="100" name="discount_credits" id="discount_credits" />
<span id="newValue" value="0">0</span>
$('#discount_credits').change( function() {
var newValue = this.value;
$('#newValue').html(newValue);
});
Or you can try something like this:
<form oninput="result.value=parseInt(a.value)">
<input type="range" name="a" value="50" /> =
<output name="result">0</output>
</form>
Using the output example here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output
Several test and bug fixed!
$('input[name=form_range]').change('mousestop',function () {
});