We Keep Coding

event for slider in apache cordova

I am creating an app with cordova. I have a problem,
I can not find the function that it is used when using the slider
<label for="slider-fill" class="ou">Ora 23:00</label>
<input class="ou" type="range" name="slider-fill" id="slider-fill23" value="5" min="5" max="30" data-highlight="true">

Angular Material - Sliders and oninput()

I'm working with Angular Material for a web application. Normally, I use the <input> tag when using slider bars. In there, I can use the JavaScript function oninput() to check if there is any activity. This sends a number to a server-side script. In my code, this sends a value for brightness (controlling a web-enabled light system).
<input type="range" id="c1" max="255" oninput="hexToRGB(document.getElementById('color').value);">
With Angular Material, <input> isn't used, instead opting to utilize <md-button>. If I try oninput() with this new syntax, I get no response.
<md-slider flex min="0" max="255" ng-model="color.red" aria-label="red" id="red-slider" oninput="hexToRGB(document.getElementById('color').value);" class='md-primary'></md-slider>
What is the best way to approach this problem? Should I stick to using <input> sliders? Is there an alternative to using oninput()?

Use ng-change instead of oninput
<md-slider flex min="0" max="255" ng-model="color.red" ng-change="modelChanched()" aria-label="red" id="red-slider" class='md-primary'></md-slider>
Codepen example

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>

angular directive always adds attributes to wrapping outer element

I'm new to angular and banging my head against the wall over this:
I am making a re-usable slider element which will generate an input type="range" wrapped in a label.
I want the attributes defined on the directive to be applied to the child input element defined in the directive's template, which they do, but they also get added to the wrapping label element. This seems messy and I think I'm missing something fundamental.
What is the best way to do this? do I need to use a compile function, that seems like it would defeat the purpose of having a template in the directive?
current html:
<slider min="0" max="1000" step="1" label="foo" ng-model="slider1" value="750">
</slider>
current directive:
myApp.directive('slider', function() {
return {
restrict: 'AE',
scope:{
data:'=ngModel',
min:'#',
max:'#',
step:'#',
label:'#',
value:'='
},
replace: 'true',
template: '<label>{{label}}<input min="{{min}}" max="{{max}}" step="{{step}}" type="range" ng-model="data" value="{{value}}" />{{data}}</label>'
};
});
current output:
<label min="0" max="1000" step="1" label="foo" ng-model="slider1" value="250" class="ng-isolate-scope ng-pristine ng-valid ng-binding">
foo
<input min="0" max="1000" step="1" type="range" ng-model="data" value="250" class="ng-pristine ng-valid">
</label>
desired output:
<label>
foo
<input min="0" max="1000" step="1" type="range" ng-model="data" value="250" class="ng-pristine ng-valid">
</label>

This is strange. Though i haven't tried, i would guess the replace is adding the attributes of the slider element to the first element in your template which is label. Try adding another element in the template before your label, and try if replace: false does the same
<div class="filler></div><label>{{label}}<input min="{{min}}" max="{{max}}" step="{{step}}" type="range" ng-model="data" value="{{value}}" />{{data}}</label>
UPDATE
Since replate:true always seems to add the attributes, you will probably have to use replace:false, and create a compile or link function that deletes the element manually as in
link: function (scope, element, attrs) { angular.element(element).remove();

I see this question is a few months old so you've probably moved on now but I kinda just want to answer it anyway. Maybe it'll help other people.
I've only been using AngularJS for around 3 weeks now but I get the feeling that the messy output you're getting is typical of AngularJS and after all it's only messy if you're delving around in the generated html. AngularJS seems not to care too much about polluting the html with tags and attributes - it seems (to me in my opinion at least) to be about making reusable components and bits and making it easier to use them while coding.
I have found it's best not to use replace because then when you're inspecting your html it is harder to tell whether you've just used your directive or whether you simply put the html directly in the page. Additionally the docs mention that it's only real use case is for when you're generating SVG documents.
Let me use your example here to illustrate what I'm trying to say:
Source:
<some html />
<slider min="0" max="1000" step="1" label="foo" ng-model="slider1" value="750" />
<some other html />
Your desired result:
<some html />
<label>
text
<input min="0" max="1000" step="1" type="range" ng-model="data" value="250" class="ng-pristine ng-valid" />
</label>
<some other html />
Result with replace:
<some html />
<label min="0" max="1000" step="1" label="foo" ng-model="slider1" value="250" class="ng-isolate-scope ng-pristine ng-valid ng-binding">
text
<input min="0" max="1000" step="1" type="range" ng-model="data" value="250" class="ng-pristine ng-valid" />
</label>
<some other html />
Result without replace:
<some html />
<slider min="0" max="1000" step="1" label="foo" ng-model="slider1" value="250" class="ng-isolate-scope ng-pristine ng-valid ng-binding">
<label>
text
<input min="0" max="1000" step="1" type="range" ng-model="data" value="250" class="ng-pristine ng-valid" />
</label>
</slider>
<some other html />
I would suggest that when you're inspecting the html and you see your desired result how will you know whether you just wrote in the html or whether you used a directive. In the result without replace however the directive is explicitly named and it'll be impossible to mistake it for anything else. Also the html that gets inserted looks exactly like you expected it to without additional attributes on the label.
Of course you could use the compile function to remove the excess elements or attributes as mentioned by #frank but again I would suggest that this would still make your generated html less clear than the result without replace.
I would also just point out for future viewers of this question that the replace option of AngularJS directives is deprecated bearing this notice in the documentation: ([DEPRECATED!], will be removed in next major release - i.e. v2.0)
See documentation here: https://docs.angularjs.org/api/ng/service/$compile#-replace-deprecated-will-be-removed-in-next-major-release-i-e-v2-0-

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>