html input range step as an array of values
According to the W3C spec, the values for step can be "any" or a positive floating-point number. That's it.
The step attribute, if specified, must either have a value that is a
valid floating-point number that parses to a number that is greater
than zero, or must have a value that is an ASCII case-insensitive
match for the string "any".
React - input range with default step as an array of values
In this case you can make use of state
in React to store the current index of your stepped input component, rather than finding the output DOM node and changing it's inner HTML.
Which would makes your handleInputChange
function:
handleInputChange = e => {
this.setState({ currentStep: e.currentTarget.value });
};
React operates on it's own virtual DOM, it changes the names of the HTML attributes on the DOM nodes to a React equivalent -> https://reactjs.org/docs/dom-elements.html.
Which means you'll need to change oninput
to onInput
in your component.
Here is one possible working version of your React component:
import React from "react";
import { render } from "react-dom";
class App extends React.Component {
values = [10, 25, 50, 75, 100];
constructor(props) {
super(props);
this.state = {
currentStepIndex: 0
};
}
handleInputChange = e => {
this.setState({ currentStepIndex: e.currentTarget.value });
};
render() {
return (
<div>
<input
onInput={this.handleInputChange}
type="range"
min="0"
value={this.state.currentStepIndex}
max="4"
step="1"
list="tick-list"
/>
<datalist id="tick-list">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</datalist>
<span id="output">{this.values[this.state.currentStepIndex]}</span>
</div>
);
}
}
render(<App />, document.getElementById("root"));
code sandbox
input type range with specific numbers
You could map your slider values to an array although it breaks the intuitive nature of the UI a little...
<div class="slidecontainer">
<input type="range" min="0" max="8" value="4" class="slider" id="myRange" >
<input type="text" id="rangeValue">
</div>
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("rangeValue");
var vals =[10, 25 ,50 , 65 , 82, 88, 90, 98 , 100];
$(output).val(vals[slider.value]);
slider.oninput = function() {
$(output).val(vals[slider.value]);
}
</script>
how to use different step attribute in one range input in html, javascript
I have prepared a small solution for your question. Step attribute will depend on range's current value.
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript">
$(function() {
$('#years').on('input change', function() {
var
element = $('#years'),
value = element.val(),
step;
/*
Map your rules
*/
if (value < 1995) {
step = 20;
}
else {
step = 1;
}
element.attr('step', step);
$('#value').text(value);
$('#step').text(step);
});
});
</script>
</head>
<body>
<div>
Current value: <span id="value"></span>
</div>
<div>
Current step: <span id="step"></span>
</div>
<div>
<input id="years" type="range" value="1965" min="1965" max="2015" />
</div>
</body>
</html>
Demo: https://jsfiddle.net/logual/7uLftnc6/1/
Step on range input
By itself the range element is linear. However with JS you can interpret its value and scale the result. Let's say we go from 1-11 in steps of 0.5. From 1-8 you take 1.000.000 * (value/8), and above 8 you take 1.000.000 + (1.000.000 * (value-7))
<input type="range" min="1" max="11" step="0.5" onchange="scaleValue(this);" />
<br>
<input type="text" id="output" />
var output = document.getElementById("output");
function scaleValue(e) {
if (e.value <= 8) {
output.value = 1000000 * (e.value / 8);
} else {
output.value = 1000000 + (1000000 * (e.value - 7));
}
}
JSFiddle here
This question has a few ideas on how to get a non-linear range on an HTML5 slider.
Related Topics
How to Import Local Image Using Knitr for Markdown
What Happens If I Don't Put a <!Doctype HTML> in My Code? Will It Make Any Major Changes
Mobile Safari 5Mb HTML5 Application Cache Limit
Print When Textarea Has Overflow
How to Restrict My Input Type="File" to Accept Only Png Image Files Not Working in Firefox
Svg Fill Animation for The Given Path
Parallax Scrolling with CSS Only
Disable Opacity on Child Element When Parent Element Has Opacity
Bootstrap 3 Truncate Long Text Inside Rows of a Table in a Responsive Way
How to Detect Click Outside of an Element in Angular
How to Vertical Align an Inline-Block in a Line of Text
Webpage Starts Zoomed in on Mobile Devices
How to Style HTML5 <Meter> Tag
<Ol> with Numbers Another Color
Image Overlay on Responsive Sized Images Bootstrap
How to Safely Render HTML in React
Display Simple HTML in a Native Blackberry Application
Ie Offsetting and Ignoring Height/Width of Anchor Focus Outlines