What's the wrong with this HTML5 , Javascript slider code? - javascript

i'm trying to make a slider example with HTML5 and Javascript but the code doesn't work
<script type="text/javascript">
function slider_change(val){
document.getElementById('slider_value').innerHtml=val;
}
</script>
<input type="range" id="slider" min="0" max="100" value="50"
step="2" onChange="slider_change(this.value)" />
<br/><br/>
Slider value : <span id="slider_value" >50</span>
appears the slider but no change in the inner HTML of the span .

The property is called innerHTML, not innerHtml

Good to see you have done everything right except innerHTML .. replace innerHtml by innerHTML

Related

How am i supposed to pass the value of a slider to a javascript function?

So i'm trying to pass a value of a slider onto a javascript function, to set the volume of an audio. I'm very new to javascript so i'm not quite sure what i'm doing but Chrome complains about Uncaught TypeError: Cannot read property 'value' of null.
HTML5 code
<div class="mt-2">Volume</div>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="musicVolume">
<output id="musicVolume"> </output>
Javascript code
// Create audio object
var themeAudio = new Audio()
volumeSlider = parseInt(document.getElementById("musicVolume").value );
themeAudio.volume = volumeSlider
themeAudio.loop = true
(The javascript code is under it's own file, background.js while the HTML code is under popup.html)
You can put <script /> in the bottom on your <body> or add attribute deffer for script

How to Create rule data in html

Create page htm include number 0~9 and rule, when you click to number or rule then data change the same image
You might be looking for something like the html range-type input, e.g. <input type="range" id="mySlider" min="0" value="5" max="9" step="1">. For example, see this description.

Getting a value from jquery mobile slider

This is driving me crazy. I'm working with jquery mobile 1.4.5 and firebase and I have this code:
<html>
<body>
<div>
<label for="size">Stroke thickness:</label>
<input type="range" name="size" id="size" value="5" min="1" max="100" data-highlight="true">
</div>
<script>
//Keeps updated with the current size in firebase
currentSize.on("value", function(snapshot)
{
siz = snapshot.val();
$("#size").val(siz);
$("#size").slider("refresh");
});
$("#size").on('slidestop', function(event)
{
var a = $("#size").val();
currentSize.set(a);
});
</script>
</body>
</html>
As you can see I update the value of the slider from firebase. This works fine.
The problem is when I try to set it. It simply doesn't work and I've tried many ways, unless I put the data-role="none" attribute, then it works like a charm, but of course without the nice mobile theme.
I'll really appreciate any help.

How to dynamically update range slider

I've created the following code to show the user their range slider value. However, it only shows the value when the user stops moving the slider. Is there a way to show the value WHILE the user drags the range slider? I'm looking for a way to do this in vanilla JS.
function updateInput(val) {
document.getElementById('textInput').innerHTML=val;
}
<input type="range" name="rangeInput" min="0" max="100" onchange="updateInput(this.value);">
<p id="textInput"></p>
Here you go:
<input type="range" name="rangeInput" min="0" max="100" onchange="updateInput(this.value);" oninput="updateInput(this.value)" >
<p id="textInput"></p>
oninput is not supported in IE10, so you have to use both, oninput and onchange.
Here is the demo
Use oninput instead of onchange.
Magical proof!
onmousemove function make this happen:
<input type="range" name="rangeInput" min="0" max="100" onmousemove="document.getElementById('textInput').innerHTML=this.value;">
<p id="textInput"></p>

range input disable does not work in chrome

I am disabling my range input however in chrome it shows it grayed out but it is still usable.
<input type="range" disabled min="0" max="100"/>
I would assume the above would not allow you to change its value.
Am I doing it wrong?
jsFiddle
Relevant specification Disabled
Here is the Chrome bug report, guess just need to wait for version 15 as the commenters mentioned.
Bug 54820
you can remove all binded events of that specific scroll group to make that scroll disable like:
<div id="fieldset1">
<input type="range" disabled min="0" max="100" readonly="1"/>
</div>
<script>
$(":range").rangeinput();
$('#fieldset1 *').unbind(); // for all events
</script>
its works ..
no need to disable text field; beacause on form submission that field will not be posted ..
My solution JSFIDDLE (Works fine in default android browser)
html
<input id="range" type="range" value="10" min="0" max="30" step="10"/>
<button id="disableBtn">Disable</button>
JS
document.getElementById('disableBtn').addEventListener('input', filter);
document.getElementById('disableBtn').addEventListener('click', disable);
function disable(){
document.getElementById('range').disabled = !document.getElementById('range').disabled;
}
function filter(){
if(document.getElementById('range').disabled){
document.getElementById('range').value = document.getElementById('range').defaultValue;
}
}
I found a corny solution for chrome, because it doesn't seem like you can disable it from user input. Put a div over it so a user cannot interact with it. Not pretty but works:
<div style="position:relative;">
<div style="position:absolute;z-index:5;width:100%;height:100%;"></div>
<input type="range" disbaled=True min="0" max="100" value="0"/><span id="v">100</span>
</div>

Categories