We Keep Coding

Angular 5 DOM two way binding input number and slider

I try to use a slider and input of type number at the same time. I create the objects in runtime so I would like to do it just in the DOM.
If I change the value of the slider the input gets the same value but not the other way around.
And also there is not value in the input number in the beginning.
..
*ngFor="let vk of selectedVK"
..
<div class="row">
<div class="col-md-7">
<input
type="range"
ngModel
name="slider"
#slider="ngModel"
min="0"
max="{{vk.max}}"
step="10"
value="{{vk.max/2}}"/>
</div>
<div class="col-md-5">
<input
type="number"
class="form-control"
[value]="slider.value"
max="{{vk.max}}"
min=0>
</div>
<p>{{slider.value}}</p>
</div>

You need to use two-way data binding.
With two-way data binding, when properties in the model get updated, so does the UI. When UI elements get updated, the changes get propagated back to the model.
<input
type="number"
class="form-control"
[(ngModel)]="slider.value"
max="{{vk.max}}"
min=0>

How to set slider step values to some fixed values?

I'm working on sliders with the jQuery sliders, I have a inout slider as
<form id="sliderData">
<input id="slider1" type="range" min="0" max="50" step="">
</form>
I want the slider to set up to only some fixed values as [2,30,20,30,35,45]. So I cannot set up the step value. I have tried to fire the event by this code
$('form#sliderData').change(function () {
alert("Hello");
});
This event is not even firing.Is there anyway to set slider to random values

The event is not being fired because you need to hook the change event to the slider control itself, not it's parent form.
The problem you have is that you cannot specify specific steps in a slider control. They must all be the same step apart from the min to the max values. To solve this you could instead make the values of the slider match the indexes of the values in your JS array, and have a label showing the actual option chosen. Something like this:
var values = [2, 30, 20, 30, 35, 45];
$('#slider1').on('input', e => $('span').text(values[e.target.value]));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="sliderData">
<input id="slider1" type="range" min="0" max="5" value="0">
<span>2</span>
</form>

Shifting jQuery focus to next div separated input

I have 3 inputs for every div container (e.g. first-section, second-section ...), and I have several such div containers on my page, similar to this:
...
<div id="first-section">
<fieldset>
<legend>First Section</legend>
<input type="number" placeholder="000" id="input1" min="0" max="255" autofocus maxlength="3" required>
...
</fieldset>
</div>
<div id="second-section">
<fieldset>
<legend>Second Section</legend>
<input type="number" placeholder="000" id="input2" autofocus min="0" max="255" maxlength="3" required>
...
how can I use jQuery to move from input1 to input2 to input3 (not shown) to input4 (not shown) only after the user has entered the maxlength of input which is set to 3? My jQuery below does not work because when I move onto the third input (not shown), it keeps resetting the focus back to input 2.
$(':input').keyup(function(e){
if($(this).val().length==$(this).attr('maxlength')){
$(this).nextAll(':input').first().focus();
if($('#input1').val().length==$('#input1').attr('maxlength')){
$('#input2').focus();
}
}
})

You can find the div that contains the current input, then find the next sibling of the div and the input inside the next div element and set the focus to that.
$(this).closest('div').next().find(':input').first().focus();
Demo: Fiddle

The above one has following issues:
unable to move to previous tab once its filled.
skips the text box which is already filled.
makes things worst if you have JS validations on any input fields.
Use the below jQuery plug-in its easy to configure and use:
Developer Site: http://www.mathachew.com/sandbox/jquery-autotab/
Documentation: https://github.com/Mathachew/jquery-autotab/blob/master/README.md
Includes both Angular and React examples
Cheers...

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

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

Jquery mobile dual range slider reload with new range

Slider works well with initial range. Here is html for slider, initial range is 0 to 100
<div data-role="rangeslider">
<input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40">
<input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80">
</div>
<button id="btnReload" onclick="reloadRangeSlider(200, 300)"></button>
I want to implement a javascript function that can help to reload the slider with new range like 200 to 300. In my case, want to reload slider by clicking on btnRelaod button.
function reloadRangeSlider(min, max){
//To do: reload functionality goes here
}

Here is the answer of my question
function reloadRangeSlider(min, max){
$('#range-1a').attr("min", min).attr("max", max).val(min);
$('#range-1b').attr("min", min).attr("max", max).val(max);
$('#range-1a').slider("refresh");
$('#range-1b').slider("refresh");
}

According to JQuery Mobile Docs
If you manipulate a slider via JavaScript, you must call the refresh method on it to update the visual styling. Here is an example:
$("#yourSlider").attr("min", min)
$("#yourSlider").attr("max", max)
$("#yourSlider").slider("refresh");
or you can use
$("#yourSlider").attr("min", min).attr("max", max).slider("refresh");