JSFiddle - React, Tailwind, and code Playground

Minimal and nice html number input element using jQuery Spinners

by Karmik Patel

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<br/><br/><br/>
<div id='kpElements'>
    <input id="spinner1" value="0.5" />
    <input id="ncv_percent_value" value="105" />
</div>
  <button onclick="test()">Test</button>
  <!-- 
  Add following script for Mouse wheel usage for spinners<a
  
  https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.5/jquery.mousewheel.min.js
  -->
  
<div id="cursor">
</div>

CSS

#kpElements input{
  
  font-size: 18px;
  width:40px;
  padding:0px;
}

#kpElements{
  margin-left:100px;
}
#cursor
{
  
  display: block;
  width: 400px;
  height: 400px;
  background: red;
  cursor: url(http://findicons.com/files/icons/1840/free_style/128/hand.png) 4 12, auto;

  
}

JavaScript

$( function() {
     $( "#spinner1" ).spinner({
      step: 0.5,
      min: 0.5,
      max: 5,
    });
     $( "#ncv_percent_value" ).spinner({
     	step:5,
      min: 100,
      max: 199
    });
  } );
  
  function test(){
  	if($("#ncv_percent_value").spinner("isValid"))
    {
    	alert("OK, Valid!!");
    }
  }
  
  //alert(parseInt(50,10));