HTML Input Range Step as an Array of Values

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/

Sample Image

Sample Image

Sample Image

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



Leave a reply



Submit