Input

HTML

<link rel="stylesheet" href="https://rawgit.com/connors/photon/master/dist/css/photon.css">
<link rel="stylesheet" href="https://rawgit.com/MauriceConrad/PhotonKit-Components/master/Photon-Components/input/dist/input.css">
<script src="https://rawgit.com/MauriceConrad/PhotonKit-Components/master/Photon-Components/input/dist/input.js"></script>
<!--As you can see, it's just simple as it is-->
<input type="text">

<br><br>

<!--Also the search input can be used instead-->
<input type="search" placeholder="Search">

<br><br>

<!--'id' is here just required to select it in the 'data-input' attribute of the stepper. You can use every valid querySelector instead of the id-->
<input type="number"step=".5" min="-14" max="26" value="2" id="myInput">

<!--This is the stepper-->
<div class="stepper" data-input="#myInput">
  <button></button>
  <button></button>
</div>

<br><br>


<!--The id is just used to select in the following javascript snippet-->
<input type="number" value="10" data-suffix=" px" id="myInputWithSuffix">
<div class="stepper" data-input="#myInputWithSuffix">
  <button></button>
  <button></button>
</div>
<br>
Please try it out and change the input's value!

CSS

body {
  margin: 10px;
}

JavaScript

var myInputWithSuffix = document.querySelector("#myInputWithSuffix");


// Sets input's value to 10 but '10 px' is shown
myInputWithSuffix.value = 10;

alert(myInputWithSuffix.value);