metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Let the user specify a numeric value with slider component. The most popular HTML, CSS, and JS library in Metro style."> <meta name="keywords" content="Slider, HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Slider - Metro 4 :: Popular HTML, CSS and JS library</title> <style> .custom-marker { width: 24px!important; height: 24px!important; } </style> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Slider</a></li> <li class="toc-entry"><a href="#_slider_about">About slider</a></li> <li class="toc-entry"><a href="#_slider_value">Slider value</a></li> <li class="toc-entry"><a href="#_slider_accuracy">Accuracy</a></li> <li class="toc-entry"><a href="#_slider_target">Additional target</a></li> <li class="toc-entry"><a href="#_slider_buffer">Buffer</a></li> <li class="toc-entry"> <a href="#_slider_hint">Hint</a> <ul> <li class="toc-entry"><a href="#_slider_hint_position">Position</a></li> <li class="toc-entry"><a href="#_slider_hint_value">Value</a></li> </ul> </li> <li class="toc-entry"><a href="#_slider_options">Options</a></li> <li class="toc-entry"><a href="#_slider_events">Events</a></li> <li class="toc-entry"><a href="#_slider_methods">Methods</a></li> <li class="toc-entry"><a href="#_slider_observe">Observe</a></li> <li class="toc-entry"><a href="#_slider_customize">Customize</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Slider</h1> <p class="text-leader"> Let the user specify a numeric value with slider component. </p>  <h3 id="_slider_about">About slider</h3> <p> Component <code>slider</code> let the user specify a numeric value which must be no less than a given value, and no more than another given value. To create <code>slider</code> add attribute <code>data-role="slider"</code> to element. </p> <div class="example"> <input data-role="slider" data-value="50"> </div> <pre><code> <input data-role="slider"> </code></pre> <p> Metro 4 support two type of slider: <code>vertical</code> and <code>horizontal</code> (default). To create <code>vertical</code> slider, add attribute <code>data-vertical="true"</code> to element. To set specific size of the <code>slider</code>, use attribute <code>data-size</code>. He sets the <code>width</code> for <code>horizontal</code> and <code>height</code> for the <code>vertical</code> slider. </p> <div class="example"> <div class="row flex-justify-center flex-align-center"> <div class="cell-md-6"> <input id="s1" data-role="slider" data-value="50"> </div> <div class="cell-md-6"> <input id="s2" class="mx-auto" data-role="slider" data-vertical="true" data-size="200" data-value="50"> </div> </div> </div> <pre><code class="html"> <input data-role="slider" data-vertical="true" data-size="200"> </code></pre> <h3 id="_slider_value">Slider value</h3> <p> The slider in Metro 4 can return <strong>two</strong> types of values: the <code>actual value</code> and its equivalent in <code>percent</code>. How the value will be returned determines the attribute <code>data-return-type</code>, it can take two values: <code>value</code> and <code>percent</code>. By default slider return <code>actual value</code>. To return value in percent equivalent, set this attribute to <code>data-return-type="percent"</code>. </p> <div class="example"> <div class="row"> <div class="cell-md-6"> <h6>Return actual value</h6> <input data-role="slider" data-show-min-max="true" data-return-type="value" data-min="-40" data-max="40" onchange="$('#slider-return-value').val(this.value)"> <input type="text" id="slider-return-value"> </div> <div class="cell-md-6"> <h6>Return percent</h6> <input data-role="slider" data-show-min-max="true" data-return-type="percent" data-min="-40" data-max="40" onchange="$('#slider-return-percent').val(this.value+'%')"> <input type="text" id="slider-return-percent"> </div> </div> </div> <pre><code class="html"> <input data-role="slider" data-return-type="value"> <input data-role="slider" data-return-type="percent"> </code></pre> <h3 id="_slider_accuracy">Accuracy</h3> <p> You can set <code>accuracy</code> for slider with attribute <code>data-accuracy</code>. </p> <div class="example"> <input data-role="slider" data-accuracy="5" data-hint-always="true"> </div> <pre><code> <input data-role="slider" data-accuracy="5" data-hint-always="true"> </code></pre> <h3 id="_slider_target">Additional target</h3> <p> You can put slider value to additional targets. To set it, add attribute <code>data-target="..."</code> to element. Value for this attribute must be selector specific string. </p> <div class="example"> <div class="row flex-align-center"> <div class="cell-md-4"> <input data-role="slider" data-target="#slider-target1, #slider-target2"> </div> <div class="cell-md-4"> <div class="p-2 bg-cyan fg-white text-center" id="slider-target1"></div> </div> <div class="cell-md-4"> <input type="text" id="slider-target2"> </div> </div> </div> <pre><code> <input data-role="slider" data-target="#slider-target1, #slider-target2"> <div class="p-2 bg-cyan fg-white text-center" id="slider-target"></div> <input type="text" id="slider-target2"> </code></pre> <h3 id="_slider_buffer">Buffer</h3> <p> Very often the slider is used to create a control in the media player where it is necessary to show the buffering process. Slider Metro 4 provides such a possibility "out of the box." To set <code>buffer</code> use attribute <code>data-buffer</code> or special methods (see below). </p> <div class="example"> <input data-role="slider" data-buffer="60" data-value="20"> </div> <pre><code> <input data-role="slider" data-buffer="60" data-value="20"> </code></pre> <p class="remark warning"> Important! For buffer you must use <strong>percent</strong> value! </p>  <h3 id="_slider_hint">Hint</h3> <p> You can enable <code>hint</code> for slider. To enable <code>hint</code> add attribute <code>data-hint="true"</code> to element. </p> <div class="example"> <input data-role="slider" data-hint="true" data-value="50"> </div> <pre><code> <input data-role="slider" data-hint="true"> </code></pre> <p> Also you can make the hint as permanent. To set <code>hint</code> in <code>permanent</code> mode add attribute <code>data-hint-always="true"</code>. </p> <div class="example"> <input data-role="slider" data-hint="true" data-hint-always="true" data-value="50"> </div> <pre><code> <input data-role="slider" data-hint="true" data-hint-always="true"> </code></pre> <h4 id="_slider_hint_position">Hint position</h4> <p> You can set <code>hint position</code> with attribute <code>data-hint-position</code>. To set specific position use next values for this attribute: <code>top</code>, <code>bottom</code>, <code>left</code> and <code>right</code>. </p> <div class="example"> <div class="row"> <div class="cell-md-3"><input data-role="slider" data-hint-position="top" data-hint-always="true" data-value="86" data-cls-hint="bg-red fg-white"></div> <div class="cell-md-3"><input data-role="slider" data-hint-position="bottom" data-hint-always="true" data-value="21" data-cls-hint="bg-red fg-white"></div> <div class="cell-md-3"><input data-role="slider" data-hint-position="left" data-hint-always="true" data-value="55" data-cls-hint="bg-red fg-white"></div> <div class="cell-md-3"><input data-role="slider" data-hint-position="right" data-hint-always="true" data-value="77" data-cls-hint="bg-red fg-white"></div> </div> </div> <pre><code> <input data-role="slider" data-hint-position="top"> <input data-role="slider" data-hint-position="bottom"> <input data-role="slider" data-hint-position="left"> <input data-role="slider" data-hint-position="right"> </code></pre> <h4 id="_slider_hint_value">Hint value</h4> <p> You can use <code>template</code> for hint value with two variables <code>$1</code> and <code>$2</code>. First - actual value, second - percent value. </p> <div class="example"> <input data-role="slider" data-show-min-max="true" data-hint-mask="V: $1, $2%" data-hint-always="true" data-value="0" data-min="-40" data-max="40" data-cls-hint="bg-cyan fg-white"> </div> <pre><code class="html"> <input data-role="slider" data-hint-mask="V: $1, $2%" data-hint-always="true" data-value="0" data-show-min-max="true" data-min="-40" data-max="40"> </code></pre> <h3 id="_slider_options">Options</h3> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Options</th> <th>Data-*</th> <th>Default</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td>min</td> <td><code>data-min</code></td> <td>0</td> <td>Min slider value</td> </tr> <tr> <td>max</td> <td><code>data-max</code></td> <td>100</td> <td>Max slider value</td> </tr> <tr> <td>showMinMax</td> <td><code>data-show-min-max</code></td> <td>false</td> <td>When true, additional block will be created and inserted before slider</td> </tr> <tr> <td>value</td> <td><code>data-value</code></td> <td>0</td> <td>Initial slider value</td> </tr> <tr> <td>accuracy</td> <td><code>data-accuracy</code></td> <td>0</td> <td>Slider accuracy</td> </tr> <tr> <td>buffer</td> <td><code>data-buffer</code></td> <td>0</td> <td>Initial slider buffer value</td> </tr> <tr> <td>hint</td> <td><code>data-hint</code></td> <td>false</td> <td>Show slider hint</td> </tr> <tr> <td>hintAlways</td> <td><code>data-hint-always</code></td> <td>false</td> <td>Show slider hint permanent</td> </tr> <tr> <td>hintPosition</td> <td><code>data-hint-position</code></td> <td>top</td> <td>Hint position. Can be: top, left, right, bottom</td> </tr> <tr> <td>hintMask</td> <td><code>data-hint-mask</code></td> <td>$1</td> <td>Hint output mask (template)</td> </tr> <tr> <td>vertical</td> <td><code>data-vertical</code></td> <td>false</td> <td>Vertical slider orientation</td> </tr> <tr> <td>target</td> <td><code>data-target</code></td> <td></td> <td>Additional targets for slider value</td> </tr> <tr> <td>returnType</td> <td><code>data-return-type</code></td> <td></td> <td>How value will be returned: value or percent</td> </tr> <tr> <td>size</td> <td><code>data-size</code></td> <td>0</td> <td>Slider specific size</td> </tr> </tbody> </table> <h3 id="_slider_events">Events</h3> <p> When slider works, it generated the numbers of events. You can use callback for this event to behavior with slider. </p> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Event</th> <th>Data-*</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td>onStart(val, percent, slider)</td> <td><code>data-on-start</code></td> <td>Fired when start sliding</td> </tr> <tr> <td>onStop(val, percent, slider)</td> <td><code>data-on-stop</code></td> <td>Fired when stop sliding</td> </tr> <tr> <td>onMove(val, percent, slider)</td> <td><code>data-on-move</code></td> <td>Fired when user move slider marker</td> </tr> <tr> <td>onClick(val, percent, slider)</td> <td><code>data-on-click</code></td> <td>Fired when user clicked on slider</td> </tr> <tr> <td>onChangeValue(val, percent, slider)</td> <td><code>data-on-change-value</code></td> <td>Fired when slider value was changed</td> </tr> <tr> <td>onChangeBuffer(val, slider)</td> <td><code>data-on-change-buffer</code></td> <td>Fired when slider buffer value was changed</td> </tr> <tr> <td>onFocus(val, percent, slider)</td> <td><code>data-on-focus</code></td> <td>Fired when slider marker get focus</td> </tr> <tr> <td>onBlur(val, percent, slider)</td> <td><code>data-on-blur</code></td> <td>Fired when slider marker loses focus</td> </tr> <tr> <td>onSliderCreate(slider)</td> <td><code>data-on-slider-create</code></td> <td>Fired when slider was created</td> </tr> </tbody> </table> <p> Also you can use standard <code>onchage</code> event for <code>input</code> with <code>data-role="slider"</code>. </p> <div class="example"> <div class="row flex-align-center"> <div class="cell-md-6"> <input data-role="slider" data-show-min-max="true" data-min="-100" data-max="100" data-on-change-value="$('#event-receiver').val('Value: '+arguments[0]+', '+arguments[1]+'%')"> </div> <div class="cell-md-6"> <input type="text" id="event-receiver"> </div> </div> </div> <pre><code> <input data-role="slider" data-show-min-max="true" data-min="-100" data-max="100" data-on-change-value="$('#event-receiver').val('Value: '+arguments[0]+', '+arguments[1]+'%')"> <input type="text" id="event-receiver"> </code></pre> <h3 id="_slider_methods">Methods</h3> <p> In additional, You can use slider methods to interact with the component. </p> <ul> <li><strong>val()</strong> - get value</li> <li><strong>val(v)</strong> - set value</li> <li><strong>buff()</strong> - get buffer value</li> <li><strong>buff(v)</strong> - set buffer value</li> </ul> <div class="example"> <div class="row"> <div class="cell-md-6"> <input type="number" min="0" max="100" oninput="$('#slider-methods').data('slider').val(this.value)"> </div> <div class="cell-md-6"> <input data-role="slider" data-accuracy="10" id="slider-methods"> </div> </div> </div> <pre><code> <div class="row"> <div class="cell-md-6"> <input type="number" min="0" max="100" oninput="$('#slider-methods').data('slider').val(this.value)"> </div> <div class="cell-md-6"> <input data-role="slider" data-accuracy="10" id="slider-methods"> </div> </div> </code></pre> <h3 id="_slider_observe">Observe</h3> <p> You can change attributes <code>data-value</code>, <code>data-buffer</code> at runtime and slider will be updated. </p> <div class="example"> <h6>Change value in input and observe how value changed in slider</h6> <div class="row"> <div class="cell-md-6"> <input type="number" min="0" max="100" id="inp-obs" value="0"> </div> <div class="cell-md-6"> <input data-role="slider" id="slider-obs"> </div> </div> </div> <pre><code> <div class="row"> <div class="cell-md-6"> <input type="number" min="0" max="100" id="inp-obs" value="0"> </div> <div class="cell-md-6"> <input data-role="slider" id="slider-obs"> </div> </div> <script> $("#inp-obs").on("keyup input change paste propertychange", function(){ $('#slider-obs').attr('data-value', this.value); }) </script> </code></pre>  <h3 id="_slider_customize">Customize</h3> <p> If you need to customize the slider, you can use next options: </p> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Option</th> <th>Data-*</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td>clsSlider</td> <td><code>data-cls-slider</code></td> <td>Additional class for slider</td> </tr> <tr> <td>clsBackside</td> <td><code>data-cls-backside</code></td> <td>Additional class for slider backside</td> </tr> <tr> <td>clsComplete</td> <td><code>data-cls-complete</code></td> <td>Additional class for slider complete</td> </tr> <tr> <td>clsBuffer</td> <td><code>data-cls-buffer</code></td> <td>Additional class for slider buffer</td> </tr> <tr> <td>clsMarker</td> <td><code>data-cls-marker</code></td> <td>Additional class for slider marker</td> </tr> <tr> <td>clsHint</td> <td><code>data-cls-hint</code></td> <td>Additional class for slider hint</td> </tr> <tr> <td>clsMinMax</td> <td><code>data-cls-min-max</code></td> <td>Additional class for min-max info block</td> </tr> <tr> <td>clsMin</td> <td><code>data-cls-min</code></td> <td>Additional class for min value for info block</td> </tr> <tr> <td>clsMax</td> <td><code>data-cls-max</code></td> <td>Additional class for max value for info block</td> </tr> </tbody> </table> <div class="example"> <input data-role="slider" data-value="50" data-buffer="75" data-hint-always="true" data-hint-position="bottom" data-show-min-max="true" data-cls-backside="bg-dark" data-cls-marker="bg-blue border-50 custom-marker" data-cls-hint="bg-cyan custom-marker shadow-2" data-cls-complete="bg-red" data-cls-buffer="bg-yellow" data-cls-min-max="bg-green fg-white p-2 mb-3-minus"> </div> <pre><code> <input data-role="slider" data-value="50" data-buffer="75" data-hint-always="true" data-hint-position="bottom" data-show-min-max="true" data-cls-backside="bg-dark" data-cls-marker="bg-blue border-50 custom-marker" data-cls-hint="bg-cyan custom-marker shadow-2" data-cls-complete="bg-red" data-cls-buffer="bg-yellow" data-cls-min-max="bg-green fg-white p-2 mb-3-minus"> </code></pre> <h3 id="_slider_secret">Secret classes :)</h3> <div class="example"> <div data-role="slider" class="thin"></div> <div data-role="slider" class="ultra-thin"></div> <div data-role="slider" class="ultra-thin cycle-marker"></div> </div> <pre><code> <input data-role="slider" class="thin"> <input data-role="slider" class="ultra-thin"> <input data-role="slider" class="ultra-thin cycle-marker"> </code></pre> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script> <script> $("#inp-obs").on("keyup input change paste propertychange", function(){ $('#slider-obs').attr('data-value', this.value); }) </script>    </body> </html>