How to complete input type range, when step value is not fully divisible?-CodePudding

I have an input range, the step is not fully divisible by the possible values, I tried setting step value conditionally but didn't work, is there any way this slider can be completed ?

any hack?

My requirements are to take minimum, maximum and step from user.

const orignalStep = 35;


function onChange() {
  document.getElementById("my-slider").step = orignalStep;
  const val = document.getElementById('my-slider').value;
  document.getElementById('label').innerText = val;
/*   const isAtSecondLastStep = val   35 >= 100;
  if (isAtSecondLastStep) {
    const newStep = 100 - val;
    document.getElementById("my-slider").step = newStep;
  
  } */
}

<input min="0" max="100" step="35" value=0 id='my-slider' type="range" oninput='onChange()'/>
<span id='label'>0</span>

CodePudding user response：

Here is a working example: JS Fiddle

HTML

<div id="slider"></div>

<input type="text" name="from" id="from" value="" placeholder="from" />
<input type="text" name="to" id="to" value="" placeholder="to" />

CSS

* {
    font-family:Arial;
    font-size:20px;
}
body {
    padding:20px;
}
#slider { margin:20px }

JS with Jquery

myData = [ 0, 35, 70, 100 ];

    slider_config = {
        range: true,
        min: 0,
        max: myData.length - 1,
        step: 1,
        slide: function( event, ui ) {
                // Set the real value into the inputs
                $('#from').val( myData[ ui.values[0] ] );
                $('#to').val( myData[ ui.values[1] ] );
        },
        create: function() {
                $(this).slider('values',0,0);
                $(this).slider('values',1,myData.length - 1);
        }
    };

    // Render Slider
    $('#slider').slider(slider_config);

CodePudding user response：

I hope this will solve your problem. I have used Pure JS and HTML.

var values = [0,35,70,100];

var input = document.getElementById('input'),
   output = document.getElementById('output');
input.oninput = function(){
    output.innerHTML = values[this.value];
};
input.oninput();

<input id="input" type="range" min="0" value="0" max="3" step="1">
<div id="output"></div>