diff --git a/dist/html-duration-picker.min.js b/dist/html-duration-picker.min.js
index b46688e..de1b9fe 100644
--- a/dist/html-duration-picker.min.js
+++ b/dist/html-duration-picker.min.js
@@ -4,8 +4,8 @@
  * html-duration-picker.js
  *
  * @description Turn an html input box to a duration picker, without jQuery
- * @version 2.3.0
+ * @version 2.3.1
  * @author Chif <nadchif@gmail.com>
  * @license Apache-2.0
  *
- */e.default=function(){window.NodeList&&!window.NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach);var t=".html-duration-picker-input-controls-wrapper .html-duration-picker {  text-align: right;  padding-right: 20px;  box-sizing: border-box;  width: 100%;  margin: 0;  cursor: text;}.html-duration-picker-input-controls-wrapper .scroll-btn {  text-align: center;  width: 16px;  padding: 0 4px;  border: none;  cursor: default;  position: absolute;}.html-duration-picker-input-controls-wrapper .caret {  width: 0;  height: 0;  border-style: solid;}.html-duration-picker-input-controls-wrapper .caret.caret-up {  border-width: 0 4px 5px 4px;  border-color: transparent transparent #000 transparent;}.html-duration-picker-input-controls-wrapper .caret.caret-down {  border-width: 5px 4px 0 4px;  border-color: #000 transparent transparent transparent;}.html-duration-picker-input-controls-wrapper .controls {  display: inline-block;  position: absolute;  top: 1px;  padding: 2px 0;}.html-duration-picker-input-controls-wrapper {  display: inline-block;  position: relative;  background: transparent;  padding: 0;  box-sizing: border-box;}",e=function(t,e){var r,n=t.target,a=n.selectionStart,o=n.value,i=o.indexOf(":"),u=o.lastIndexOf(":");return a<=i?r="hours":e||a<=u?r="minutes":!e&&a>u&&(r="seconds"),{cursorSelection:r,hideSeconds:e,hourMarker:i,minuteMarker:u}},r=function(t,e){t.setAttribute("data-adjustment-factor",e)},n=function(t){var n=t.target,o=a(n),i=e(t,o),u=i.cursorSelection,c=i.hourMarker,s=i.minuteMarker;if(u){var d=o?3:0;switch(u){case"hours":return r(n,3600),void t.target.setSelectionRange(0,c);case"minutes":return r(n,60),void t.target.setSelectionRange(c+1,s+d);case"seconds":default:return r(n,1),void t.target.setSelectionRange(s+1,s+3)}}},a=function(t){return void 0!==t.dataset.hideSeconds&&"false"!==t.dataset.hideSeconds},o=function(t,e){var r=Math.floor(e/3600);e%=3600;var n=Math.floor(e/60),o=e%60,i=String(r).padStart(2,"0"),u=String(n).padStart(2,"0"),c=String(o).padStart(2,"0"),s="".concat(i,":").concat(u);t.value=a(t)?s:"".concat(s,":").concat(c),t.dispatchEvent(function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{bubbles:!1,cancelable:!1};if("function"==typeof Event)return new Event(t);var r=document.createEvent("Event");return r.initEvent(t,e.bubbles,e.cancelable),r}("input"))},i=function(t,e){var r=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],n=t.value.indexOf(":"),o=t.value.lastIndexOf(":"),i=a(t);r&&(t.focus(),t.select()),e>=3600?(t.selectionStart=0,t.selectionEnd=n):!i&&e<60?(t.selectionStart=o+1,t.selectionEnd=o+3):(t.selectionStart=n+1,t.selectionEnd=n+3,e=60),e>=1&&e<=3600&&t.setAttribute("data-adjustment-factor",e)},u=function(t){var e=1;return Number(t.getAttribute("data-adjustment-factor"))>0&&(e=Number(t.getAttribute("data-adjustment-factor"))),e},c=function(t,e){t.setAttribute("value",e)},s=function(t,e){var r=u(t),n=f(t.value);switch(e){case"up":n+=r;break;case"down":(n-=r)<0&&(n=0)}var a=p(t,n);o(t,a)},d=function(t,e){var r=u(t);switch(e){case"left":i(t,60*r);break;case"right":i(t,r/60)}},l=function(t,e){return RegExp(e?"^[0-9]{2,3}:[0-5][0-9]$":"^[0-9]{2,3}:[0-5][0-9]:[0-5][0-9]$").test(t)},p=function(t,e){var r=m(t),n=r.maxDuration,a=r.minDuration;return Math.min(Math.max(e,a),n)},f=function(t){if(!l(t))return console.warn("value '".concat(t," is not a valid duration value")),0;var e=t.split(":");return e.length<2?0:Number(e[2]||0)+Number(60*e[1])+Number(60*e[0]*60)},v=function(t){var r=t.target,n=a(r),o=e(t,n).cursorSelection,s=r.value.split(":");if(r.dataset.duration&&l(r.dataset.duration,n)&&(n&&2!==s.length||!n&&3!==s.length))c(r,r.dataset.duration);else if(n||3===s.length)if(n&&2!==s.length)c(r,"00:00");else{isNaN(s[0])&&(s[0]="00"),(isNaN(s[1])||s[1]<0)&&(s[1]="00"),(s[1]>59||s[1].length>2)&&(s[1]="59"),n||2!==s[1].length||s[1].slice(-1)!==t.key||"minutes"!==o||d(r,"right"),n||((isNaN(s[2])||s[2]<0)&&(s[2]="00"),(s[2]>59||s[2].length>2)&&(s[2]="59")),c(r,s.join(":"));var p=u(r);i(r,p)}else c(r,"00:00:00")},b=function(t){var e=t.target,r=e.value||e.dataset.duration,n=f(r);o(e,p(e,n))},h=function(t){if(["ArrowDown","ArrowUp","ArrowLeft","ArrowRight","Enter"].includes(t.key)){switch(t.key){case"ArrowDown":s(t.target,"down");break;case"ArrowUp":s(t.target,"up");break;case"ArrowLeft":d(t.target,"left");break;case"ArrowRight":d(t.target,"right");break;case"Enter":b(t),t.target.blur()}t.preventDefault()}if("Tab"===t.key){var e=u(t.target),r=a(t.target)?3600:60,n=t.shiftKey?"left":"right";d(t.target,n),("left"===n&&e<3600||"right"===n&&e>=r)&&t.preventDefault()}if(isNaN(t.key)&&!["Backspace","ArrowDown","ArrowUp","Tab"].includes(t.key))return t.preventDefault(),!1},g=function(t,e,r){var n=t.dataset[e];return l(n,a(t))?f(n):r},m=function(t){return{minDuration:g(t,"durationMin",0),maxDuration:g(t,"durationMax",1/0)}},y=function(e){if(e){var r=document.head||document.getElementsByTagName("head")[0],c=document.createElement("style");r.appendChild(c),c.styleSheet?c.styleSheet.cssText=t:c.appendChild(document.createTextNode(t))}return document.querySelectorAll("input.html-duration-picker").forEach((function(t){if("true"!=t.getAttribute("data-upgraded")){var e,r=t.currentStyle||window.getComputedStyle(t),c=r.marginRight,d=r.marginLeft,m=parseFloat(r.borderRight),y=parseFloat(r.borderLeft),w=parseFloat(r.paddingRight),x=parseFloat(r.paddingLeft),k=parseFloat(r.width);e="content-box"===r.boxSizing?k+m+y+w+x:k,t.setAttribute("data-upgraded",!0),t.value&&l(t.value,a(t))||o(t,function(t){var e=g(t,"duration",0),r=f(e);return p(t,r)}(t)),t.setAttribute("aria-label","Duration Picker"),t.addEventListener("keydown",h),t.addEventListener("focus",n),t.addEventListener("mouseup",n),t.addEventListener("change",v),t.addEventListener("blur",b),t.addEventListener("keyup",v),t.addEventListener("drop",(function(t){return t.preventDefault()}));var E=document.createElement("button"),A=document.createElement("button"),S=[E,A];E.setAttribute("class","scroll-btn"),A.setAttribute("class","scroll-btn"),E.setAttribute("type","button"),A.setAttribute("type","button"),E.setAttribute("aria-label","Increase duration"),A.setAttribute("aria-label","Decrease duration"),E.setAttribute("style","height:".concat(t.offsetHeight/2-1,"px !important; top: 1px;")),A.setAttribute("style","height:".concat(t.offsetHeight/2-1,"px !important; top: ").concat(t.offsetHeight/2-1,"px;"));var L=document.createElement("div"),D=document.createElement("div");L.setAttribute("class","caret caret-up"),D.setAttribute("class","caret caret-down "),A.appendChild(D),E.appendChild(L),S.forEach((function(e){var r;e.addEventListener("mousedown",(function(n){n.target.style.transform="translateY(1px)",n.preventDefault(),e==E?(s(t,"up"),r=setInterval(s,200,t,"up")):(s(t,"down"),r=setInterval(s,200,t,"down"))})),e.addEventListener("keypress",(function(r){r.target.style.transform="translateY(1px)","Enter"==r.key&&(r.preventDefault(),s(t,e==E?"up":"down"))})),e===E&&e.addEventListener("keydown",(function(e){"Tab"===e.key&&e.shiftKey&&(i(t,1),e.preventDefault())})),e.addEventListener("keyup",(function(e){if("Enter"==e.key){var r=u(t);i(t,r)}})),e.addEventListener("mouseup",(function(e){e.target.style.transform="translateY(0)";var n=u(t);i(t,n),clearInterval(r)})),e.addEventListener("mouseleave",(function(e){if(e.target.style.transform="translateY(0)",r){clearInterval(r);var n=u(t);i(t,n)}}))}));var N=document.createElement("div");N.setAttribute("class","controls"),N.setAttribute("style","left: ".concat(e-20,"px; height:").concat(t.offsetHeight,"px;")),N.appendChild(E),N.appendChild(A);var j=document.createElement("div");j.setAttribute("class","html-duration-picker-input-controls-wrapper"),j.setAttribute("style","width: ".concat(e,"px; margin-left: ").concat(d,"; margin-right: ").concat(c,";")),t.parentNode.insertBefore(j,t),j.appendChild(t),j.appendChild(N)}})),!0};return window.addEventListener("DOMContentLoaded",(function(){return y(!0)})),{init:function(){return y(!0)},refresh:function(){return y(!1)}}}()}]).default}));
\ No newline at end of file
+ */e.default=function(){window.NodeList&&!window.NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach);var t=".html-duration-picker-input-controls-wrapper .html-duration-picker {  text-align: right;  padding-right: 20px;  box-sizing: border-box;  width: 100%;  margin: 0;  cursor: text;}.html-duration-picker-input-controls-wrapper .scroll-btn {  text-align: center;  width: 16px;  padding: 0 4px;  border: none;  cursor: default;  position: absolute;}.html-duration-picker-input-controls-wrapper .caret {  width: 0;  height: 0;  border-style: solid;}.html-duration-picker-input-controls-wrapper .caret.caret-up {  border-width: 0 4px 5px 4px;  border-color: transparent transparent #000 transparent;}.html-duration-picker-input-controls-wrapper .caret.caret-down {  border-width: 5px 4px 0 4px;  border-color: #000 transparent transparent transparent;}.html-duration-picker-input-controls-wrapper .controls {  display: inline-block;  position: absolute;  top: 1px;  padding: 2px 0;}.html-duration-picker-input-controls-wrapper {  display: inline-block;  position: relative;  background: transparent;  padding: 0;  box-sizing: border-box;}",e=function(t,e){var r,n=t.target,a=n.selectionStart,o=n.value,i=o.indexOf(":"),u=o.lastIndexOf(":");return a<=i?r="hours":e||a<=u?r="minutes":!e&&a>u&&(r="seconds"),{cursorSelection:r,hideSeconds:e,hourMarker:i,minuteMarker:u}},r=function(t,e){t.setAttribute("data-adjustment-factor",e)},n=function(t){var n=t.target,o=a(n),i=e(t,o),u=i.cursorSelection,c=i.hourMarker,s=i.minuteMarker;if(u){var d=o?3:0;switch(u){case"hours":return r(n,3600),void t.target.setSelectionRange(0,c);case"minutes":return r(n,60),void t.target.setSelectionRange(c+1,s+d);case"seconds":default:return r(n,1),void t.target.setSelectionRange(s+1,s+3)}}},a=function(t){return void 0!==t.dataset.hideSeconds&&"false"!==t.dataset.hideSeconds},o=function(t,e){var r=Math.floor(e/3600);e%=3600;var n=Math.floor(e/60),o=e%60,i=String(r).padStart(2,"0"),u=String(n).padStart(2,"0"),c=String(o).padStart(2,"0"),s="".concat(i,":").concat(u);t.value=a(t)?s:"".concat(s,":").concat(c),t.dispatchEvent(function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{bubbles:!1,cancelable:!1};if("function"==typeof Event)return new Event(t);var r=document.createEvent("Event");return r.initEvent(t,e.bubbles,e.cancelable),r}("input"))},i=function(t,e){var r=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],n=t.value.indexOf(":"),o=t.value.lastIndexOf(":"),i=a(t);r&&(t.focus(),t.select()),e>=3600?(t.selectionStart=0,t.selectionEnd=n):!i&&e<60?(t.selectionStart=o+1,t.selectionEnd=o+3):(t.selectionStart=n+1,t.selectionEnd=n+3,e=60),e>=1&&e<=3600&&t.setAttribute("data-adjustment-factor",e)},u=function(t){var e=1;return Number(t.getAttribute("data-adjustment-factor"))>0&&(e=Number(t.getAttribute("data-adjustment-factor"))),e},c=function(t,e){t.setAttribute("value",e)},s=function(t,e){var r=u(t),n=f(t.value);switch(e){case"up":n+=r;break;case"down":(n-=r)<0&&(n=0)}var a=p(t,n);o(t,a)},d=function(t,e){var r=u(t);switch(e){case"left":i(t,60*r);break;case"right":i(t,r/60)}},l=function(t,e){return RegExp(e?"^[0-9]{2,3}:[0-5][0-9]$":"^[0-9]{2,3}:[0-5][0-9]:[0-5][0-9]$").test(t)},p=function(t,e){var r=m(t),n=r.maxDuration,a=r.minDuration;return Math.min(Math.max(e,a),n)},f=function(t){if(!l(t))return 0;var e=t.split(":");return e.length<2?0:Number(e[2]||0)+Number(60*e[1])+Number(60*e[0]*60)},b=function(t){var r=t.target,n=a(r),o=e(t,n).cursorSelection,s=r.value.split(":");if(r.dataset.duration&&l(r.dataset.duration,n)&&(n&&2!==s.length||!n&&3!==s.length))c(r,r.dataset.duration);else if(n||3===s.length)if(n&&2!==s.length)c(r,"00:00");else{isNaN(s[0])&&(s[0]="00"),(isNaN(s[1])||s[1]<0)&&(s[1]="00"),(s[1]>59||s[1].length>2)&&(s[1]="59"),n||2!==s[1].length||s[1].slice(-1)!==t.key||"minutes"!==o||d(r,"right"),n||((isNaN(s[2])||s[2]<0)&&(s[2]="00"),(s[2]>59||s[2].length>2)&&(s[2]="59")),c(r,s.join(":"));var p=u(r);i(r,p)}else c(r,"00:00:00")},v=function(t){var e=t.target,r=e.value||e.dataset.duration,n=f(r);o(e,p(e,n))},h=function(t){if(["ArrowDown","ArrowUp","ArrowLeft","ArrowRight","Enter"].includes(t.key)){switch(t.key){case"ArrowDown":s(t.target,"down");break;case"ArrowUp":s(t.target,"up");break;case"ArrowLeft":d(t.target,"left");break;case"ArrowRight":d(t.target,"right");break;case"Enter":v(t),t.target.blur()}t.preventDefault()}if("Tab"===t.key){var e=u(t.target),r=a(t.target)?3600:60,n=t.shiftKey?"left":"right";d(t.target,n),("left"===n&&e<3600||"right"===n&&e>=r)&&t.preventDefault()}if(isNaN(t.key)&&!["Backspace","ArrowDown","ArrowUp","Tab"].includes(t.key))return t.preventDefault(),!1},g=function(t,e,r){var n=t.dataset[e];return l(n,a(t))?f(n):r},m=function(t){return{minDuration:g(t,"durationMin",0),maxDuration:g(t,"durationMax",1/0)}},y=function(e){if(e){var r=document.head||document.getElementsByTagName("head")[0],c=document.createElement("style");r.appendChild(c),c.styleSheet?c.styleSheet.cssText=t:c.appendChild(document.createTextNode(t))}return document.querySelectorAll("input.html-duration-picker").forEach((function(t){if("true"!=t.getAttribute("data-upgraded")){var e,r=t.currentStyle||window.getComputedStyle(t),c=r.marginRight,d=r.marginLeft,m=parseFloat(r.borderRight),y=parseFloat(r.borderLeft),w=parseFloat(r.paddingRight),x=parseFloat(r.paddingLeft),k=parseFloat(r.width);e="content-box"===r.boxSizing?k+m+y+w+x:k,t.setAttribute("data-upgraded",!0),t.value&&l(t.value,a(t))||o(t,function(t){var e=g(t,"duration",0),r=f(e);return p(t,r)}(t)),t.setAttribute("aria-label","Duration Picker"),t.addEventListener("keydown",h),t.addEventListener("focus",n),t.addEventListener("mouseup",n),t.addEventListener("change",b),t.addEventListener("blur",v),t.addEventListener("keyup",b),t.addEventListener("drop",(function(t){return t.preventDefault()}));var E=document.createElement("button"),A=document.createElement("button"),S=[E,A];E.setAttribute("class","scroll-btn"),A.setAttribute("class","scroll-btn"),E.setAttribute("type","button"),A.setAttribute("type","button"),E.setAttribute("aria-label","Increase duration"),A.setAttribute("aria-label","Decrease duration"),E.setAttribute("style","height:".concat(t.offsetHeight/2-1,"px !important; top: 1px;")),A.setAttribute("style","height:".concat(t.offsetHeight/2-1,"px !important; top: ").concat(t.offsetHeight/2-1,"px;"));var L=document.createElement("div"),D=document.createElement("div");L.setAttribute("class","caret caret-up"),D.setAttribute("class","caret caret-down "),A.appendChild(D),E.appendChild(L),S.forEach((function(e){var r;e.addEventListener("mousedown",(function(n){n.target.style.transform="translateY(1px)",n.preventDefault(),e==E?(s(t,"up"),r=setInterval(s,200,t,"up")):(s(t,"down"),r=setInterval(s,200,t,"down"))})),e.addEventListener("keypress",(function(r){r.target.style.transform="translateY(1px)","Enter"==r.key&&(r.preventDefault(),s(t,e==E?"up":"down"))})),e===E&&e.addEventListener("keydown",(function(e){"Tab"===e.key&&e.shiftKey&&(i(t,1),e.preventDefault())})),e.addEventListener("keyup",(function(e){if("Enter"==e.key){var r=u(t);i(t,r)}})),e.addEventListener("mouseup",(function(e){e.target.style.transform="translateY(0)";var n=u(t);i(t,n),clearInterval(r)})),e.addEventListener("mouseleave",(function(e){if(e.target.style.transform="translateY(0)",r){clearInterval(r);var n=u(t);i(t,n)}}))}));var N=document.createElement("div");N.setAttribute("class","controls"),N.setAttribute("style","left: ".concat(e-20,"px; height:").concat(t.offsetHeight,"px;")),N.appendChild(E),N.appendChild(A);var j=document.createElement("div");j.setAttribute("class","html-duration-picker-input-controls-wrapper"),j.setAttribute("style","width: ".concat(e,"px; margin-left: ").concat(d,"; margin-right: ").concat(c,";")),t.parentNode.insertBefore(j,t),j.appendChild(t),j.appendChild(N)}})),!0};return window.addEventListener("DOMContentLoaded",(function(){return y(!0)})),{init:function(){return y(!0)},refresh:function(){return y(!1)}}}()}]).default}));
\ No newline at end of file
diff --git a/index.html b/index.html
index ee4a35d..9d96494 100644
--- a/index.html
+++ b/index.html
@@ -4,21 +4,30 @@
 
 <h2>Example Usage</h2>
 
+<h3>Download</h3>
 <p>
-    Include <a href="https://raw.githubusercontent.com/nadchif/html-duration-picker.js/master/dist/html-duration-picker.min.js">html-duration-picker.min.js</a> in your HTML file, just before the <code>&#x3C;/body&#x3E;</code> tag. like
+    Include download <a
+        href="https://raw.githubusercontent.com/nadchif/html-duration-picker.js/master/dist/html-duration-picker.min.js">html-duration-picker.min.js</a>
+    in your HTML file, just before the <code>&#x3C;/body&#x3E;</code> tag. like
     this:
 </p>
-    <pre>
+<pre>
         <code>
         &#x3C;script src=&#x22;html-duration-picker.min.js&#x22;&#x3E;&#x3C;/script&#x3E;
         &#x3C;/body&#x3E;
         </code>
     </pre>
-
+<h3>CDN</h3>
+<pre>
+    <code>
+    &#x3C;script src=&#x22;https://cdn.jsdelivr.net/npm/html-duration-picker@latest/dist/html-duration-picker.min.js&#x22;&#x3E;&#x3C;/script&#x3E;
+    &#x3C;/body&#x3E;
+    </code>
+</pre>
 
 <p>add a <code>html-duration-picker</code> class on any <code>&#x3C;input&#x3E;</code>box.
     like this: </p>
-    <pre>
+<pre>
         <code>
             &#x3C;input class="html-duration-picker"&#x3E;
         </code>
@@ -38,11 +47,14 @@ <h2>Result:</h2>
 
 
 <h2>Features:</h2>
-Set default value to 15 minutes <code>&#x3C;input type="text" class="html-duration-picker" data-duration="00:15:00" &#x3E;</code> <br>
+Set default value to 15 minutes
+<code>&#x3C;input type="text" class="html-duration-picker" data-duration="00:15:00" &#x3E;</code> <br>
 <br>
-Set maximum value to 35 minutes <code>&#x3C;input type="text" class="html-duration-picker" data-duration-max="00:35:00" &#x3E;</code> <br>
+Set maximum value to 35 minutes
+<code>&#x3C;input type="text" class="html-duration-picker" data-duration-max="00:35:00" &#x3E;</code> <br>
 <br>
-Set minimum value to 5 minutes <code>&#x3C;input type="text" class="html-duration-picker" data-duration-min="00:05:00" &#x3E;</code> <br>
+Set minimum value to 5 minutes
+<code>&#x3C;input type="text" class="html-duration-picker" data-duration-min="00:05:00" &#x3E;</code> <br>
 <br>
 
-<script src="https://cdn.jsdelivr.net/npm/html-duration-picker/dist/html-duration-picker.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/html-duration-picker@latest/dist/html-duration-picker.min.js"></script>
\ No newline at end of file