How to set slider step values to some fixed values? - javascript

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>

Related

input event - losing focus while dragging input element

I'm trying to make a score module using a range input. I'm using the input event to achieve this. The range input works fine, but when I add event, it loses focus shortly after dragging begins.
This is how it looks:
document.querySelector("#score").addEventListener("input", e => {
console.log(e.target.value);
});
<input type="range" min="1" max="10" value="10" draggable="true" class="score theme" id="score" step="0.1">
That happens because you added draggable="true" to the element. So the behaviour is ambiguous, should the browser allow you to move the trackball or should the browser drag the element around the page?
The two behaviours are conflicting, so in the first moment it works properly as an input range and you're able to move it around, but then it allows you to drag the element.
What's your expected behaviour?
document.querySelector("#score").addEventListener("input", e => {
console.log(e.target.value);
});
<input type="range" min="1" max="10" value="10" class="score theme" id="score" step="0.1">
draggable="true" doesn’t do what you think it does. An <input type="range"> has a draggable component to it by default. The draggable attribute makes it so that you can drag the entire element.
Removing this attribute gives the expected behaviour:
document.getElementById('score').addEventListener('input', e => {
console.log(e.target.value);
});
<input type="range" min="1" max="10" value="10" id="score" step="0.1">
This seems to be a problem with the draggable="true" attribute and not the JavaScript code. The draggable attribute allows us to make the element draggable around the DOM, i.e. from one position to another in the viewport.
Therefore, when one tries to drag the range handle, the whole slider gets dragged along, instead of just the handle, which is what you described as "losing focus".
So, the solution is to simply remove the draggable=true attribute. I made a pen on CodePen to demonstrate this. https://codepen.io/aryan_02/pen/WPNBYm
Notice what the draggable attribute does. I hope this helps you.

value is not set in slider html control

About Range input type in HTML
When I change value in slider (Range input type) that value in display in textbox 
But when I also same thing in change value in textbox it’s not set that value in slider (Range input type).
Here is code
Function for it:
we also want that when we slide the slider as well as value will change in textbox too
function :
<script type="text/javascript">
function updateTextInput(val) {
document.getElementById('textInput').value=val;
}
function updateTextInput2(val) {
document.getElementById('range1').value = val;
}
</script>
HTML :
<input type="range" min="0" max="100" value="0" id="range1" onchange="updateTextInput(this.value);"/>
<input type="text" id="textInput" value="0" onchange="updateTextInput2(this.value);">
Debug the updateTextInput function to verify the value to set,
or try
document.getElementById('textInput').value = document.getElementById('range1').value;
You need to change the event where the function is called in the textbox from onchange to oninput. The onchange event only fires after the control loses focus, i.e. when the user clicks on something else. The oninput event gets fired every time the user changes the value in the textbox.
Your code should look like this:
<input type="range" min="0" max="100" value="0" id="range1" onchange="updateTextInput(this.value);" />
<input type="text" id="textInput" value="0" oninput="updateTextInput2(this.value);">
Your JavaScript functions work 100% fine.
Here is a working example on codepen.

onchanged event, get value prior to changing? in html input tag (type=range)

Is there a way to extract the value of an input tag prior to input change at the onchange event? Or is there an event triggered before 'change' instead?
In particular I need it for type range.
This question adds to previously asked similar questions because I also
ask if there is NO way to 'catch' the value before it is being changed as
in many other programming languages.
<form >
<input type="range" value="0" id="indentA" name="indentA" min="-20" max="20" onchange="alert('trying to output original value here... \ncurrent value is: '+this.value);" >
</form>
Is this the one you are looking?
I am capturing the old value when the slider changes.
Please have a look at the below code snippet.
Code Snippet
var previos_value=0;
function getValue(value){
alert('current value is: '+value);
alert('Previous value is: '+previos_value);
previos_value=value;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form >
<input type="range" value="0" id="indentA" name="indentA" min="-20" max="20" onchange="getValue(this.value)" >
</form>

How do I create one of those draggable settings bars in html?

I've seen those draggable settings bars for random things, but I can't seem to remember what they were called, and thus am having a hard time to search it up on google.
It was one of those bars where if you dragged to the right, the value increases and if you dragged it to the left, the value decreases.
What's the easiest way to create one of these in html/css/js?
What you are looking for is called a range and is an input element:
<input type="range" min="1" max="10">
To get the out put you could use JavaScript and <output>:
<form oninput="x.value=parseInt(a.value)">
<input type="range" id="a" value="50">
<output name="x" for="a b"></output>
</form>
JSFiddle Example

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");

Categories