# IP Slider  [](https://www.webcomponents.org/element/ip-slider) A simple wrapper around `` HTML5 Element. The range input itself has browser support about like: Firefox 23+, Safari 4+, iOS 5+, Chrome 6+, Opera 11+, IE 10+, Android 4.2+. So pretty good. This custom component should largely match that. Inspired by [CSS-TRICKS](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/).  ## Install ### Script tag - Put a script tag `` in the head of your index.html - Then you can use the `` element anywhere in your template, JSX, html etc ### Node Modules - Run `npm install ip-slider --save` - Put a script tag similar to this `` in the head of your index.html - Then you can use the `` element anywhere in your template, JSX, html etc ### In a Stencil app - Run `npm install ip-slider --save` - Add an import to the npm packages `import 'ip-slider';` - Then you can use the `` element anywhere in your template, JSX, html etc ## Using Include `ip-slider` element in you page: ```html ``` Add `disabled` attribute in order to disable. You can get the **value** listening **oninput** event: ```html ``` This **event** is a **CustomEvent**: ```js function yourFunction(event) { console.log(event.detail.value); } ``` To get the real event from input, get `srcEvent`: ```js function yourFunction(event) { console.log(event.detail.srcEvent); } ``` Another option to get data: ```js const ipSlider = document.querySelector('ip-slider'); console.log(ipSlider.value); console.log(ipSlider.min); console.log(ipSlider.max); console.log(ipSlider.step); console.log(ipSlider.disabled); ```