Measurement - Distance
Change demo
Distance
JQuery Distance scroller demo with support for multiple units (metric, imperial) and built-in conversion engine. For jQuery or jQuery Mobile.
mobiscroll.settings = {
theme : ',
themeVariant : ' ,
lang : '
};
$(function () {
$('#demo').mobiscroll().distance({
units: ['mi']
});
$('#demo-km').mobiscroll().distance({
units: ['km']
});
$('#demo-conv').mobiscroll().distance({
units: ['km', 'mi'],
step : 0.5,
max : 800
});
$('#demo-non-form').mobiscroll().distance();
});
<div mbsc-form>
<div class="mbsc-align-center">
<div class="mbsc-note mbsc-note-primary">Distance scroller can be used inside a mobiscroll form or on any input.</div>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Inside Mobiscroll Form</div>
<label>
Miles
<input mbsc-input id="demo" placeholder="Please Select..." />
</label>
<label>
Kilometers
<input mbsc-input id="demo-km" placeholder="Please Select..." />
</label>
<label>
Convert
<input mbsc-input id="demo-conv" placeholder="Please Select..." />
</label>
</div>
<div class="mbsc-form-group mbsc-padding">
<p class="mbsc-thin">Use it on any input or non-mobiscroll form.</p>
</div>
</div>
<div class="demo-container">
<input id="demo-non-form" class="demo-non-form" placeholder="Please Select..." />
</div>
.demo-non-form {
width: 100%;
margin: 0 0 5px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 0;
font-family: arial, verdana, sans-serif;
font-size: 14px;
box-sizing: border-box;
-webkit-appearance: none;
}
.demo-container {
padding: 0 1em;
}
Measurement - Speed
Change demo
Speed
JQuery Speed scroller demo with support for multiple units (kmh, mph ...) and built-in conversion engine. For jQuery or jQuery Mobile.
mobiscroll.settings = {
theme : ',
themeVariant : ' ,
lang : '
};
$(function () {
$('#demo').mobiscroll().speed({
units: ['mph']
});
$('#demo-kph').mobiscroll().speed({
units: ['kph']
});
$('#demo-conv').mobiscroll().speed({
units: ['kph', 'mph'],
step : 0.01,
max : 200
});
$('#demo-non-form').mobiscroll().speed();
});
<div mbsc-form>
<div class="mbsc-align-center">
<div class="mbsc-note mbsc-note-primary">Speed scroller can be used inside a mobiscroll form or on any input.</div>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Inside Mobiscroll Form</div>
<label>
Mph
<input mbsc-input id="demo" placeholder="Please Select..." />
</label>
<label>
Kmh
<input mbsc-input id="demo-kph" placeholder="Please Select..." />
</label>
<label>
Convert
<input mbsc-input id="demo-conv" placeholder="Please Select..." />
</label>
</div>
<div class="mbsc-form-group mbsc-padding">
<p class="mbsc-thin">Use it on any input or non-mobiscroll form.</p>
</div>
</div>
<div class="demo-container">
<input id="demo-non-form" class="demo-non-form" placeholder="Please Select..." />
</div>
.demo-non-form {
width: 100%;
margin: 0 0 5px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 0;
font-family: arial, verdana, sans-serif;
font-size: 14px;
box-sizing: border-box;
-webkit-appearance: none;
}
.demo-container {
padding: 0 1em;
}
Measurement - Temperature
Change demo
Temperature
JQuery Temperature scroller with metric, imperial unit support and built-in conversion engine. Work with diff units/values. For jQuery or jQuery Mobile.
mobiscroll.settings = {
theme : ',
themeVariant : ' ,
lang : '
};
$(function () {
$('#demo').mobiscroll().temperature({
units: ['c']
});
$('#demo-fahr').mobiscroll().temperature({
units: ['f']
});
$('#demo-conv').mobiscroll().temperature({
units: ['c', 'f'],
max : 100
});
$('#demo-non-form').mobiscroll().temperature();
});
<div mbsc-form>
<div class="mbsc-align-center">
<div class="mbsc-note mbsc-note-primary">Temperature scroller can be used inside a mobiscroll form or on any input.</div>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Inside Mobiscroll Form</div>
<label>
Celsius
<input mbsc-input id="demo" placeholder="Please Select..." />
</label>
<label>
Fahrenheit
<input mbsc-input id="demo-fahr" placeholder="Please Select..." />
</label>
<label>
Convert
<input mbsc-input id="demo-conv" placeholder="Please Select..." />
</label>
</div>
<div class="mbsc-form-group mbsc-padding">
<p class="mbsc-thin">Use it on any input or non-mobiscroll form.</p>
</div>
</div>
<div class="demo-container">
<input id="demo-non-form" class="demo-non-form" placeholder="Please Select..." />
</div>
.demo-non-form {
width: 100%;
margin: 0 0 5px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 0;
font-family: arial, verdana, sans-serif;
font-size: 14px;
box-sizing: border-box;
-webkit-appearance: none;
}
.demo-container {
padding: 0 1em;
}
Measurement - Mass
Change demo
Mass
JQuery Mass scroller demo with support for multiple units (kg, lb, oz, gr ...) and built-in conversion engine. For jQuery or jQuery Mobile.
mobiscroll.settings = {
theme : ',
themeVariant : ' ,
lang : '
};
$(function () {
$('#demo').mobiscroll().mass({
units: ['kg']
});
$('#demo-lb').mobiscroll().mass({
units: ['lb']
});
$('#demo-conv').mobiscroll().mass({
units: ['kg', 'lb'],
max : 100
});
$('#demo-non-form').mobiscroll().mass();
});
<div mbsc-form>
<div class="mbsc-align-center">
<div class="mbsc-note mbsc-note-primary">Mass scroller can be used inside a mobiscroll form or on any input.</div>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Inside Mobiscroll Form</div>
<label>
Kilograms
<input mbsc-input id="demo" placeholder="Please Select..." />
</label>
<label>
Pounds
<input mbsc-input id="demo-lb" placeholder="Please Select..." />
</label>
<label>
Convert
<input mbsc-input id="demo-conv" placeholder="Please Select..." />
</label>
</div>
<div class="mbsc-form-group mbsc-padding">
<p class="mbsc-thin">Use it on any input or non-mobiscroll form.</p>
</div>
</div>
<div class="demo-container">
<input id="demo-non-form" class="demo-non-form" placeholder="Please Select..." />
</div>
.demo-non-form {
width: 100%;
margin: 0 0 5px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 0;
font-family: arial, verdana, sans-serif;
font-size: 14px;
box-sizing: border-box;
-webkit-appearance: none;
}
.demo-container {
padding: 0 1em;
}
Measurement - Force
Change demo
Force
JQuery Force scroller demo with support for multiple units (N, kp, lbf, pdl ...) and built-in conversion engine. For jQuery or jQuery Mobile.
mobiscroll.settings = {
theme : ',
themeVariant : ' ,
lang : '
};
$(function () {
$('#demo').mobiscroll().force({
units: ['N']
});
$('#demo-lbf').mobiscroll().force({
units: ['lbf']
});
$('#demo-conv').mobiscroll().force({
units: ['N', 'lbf'],
max : 100
});
$('#demo-non-form').mobiscroll().force();
});
<div mbsc-form>
<div class="mbsc-align-center">
<div class="mbsc-note mbsc-note-primary">Force scroller can be used inside a mobiscroll form or on any input.</div>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Inside Mobiscroll Form</div>
<label>
Newton
<input mbsc-input id="demo" placeholder="Please Select..." />
</label>
<label>
Pound-force
<input mbsc-input id="demo-lbf" placeholder="Please Select..." />
</label>
<label>
Convert
<input mbsc-input id="demo-conv" placeholder="Please Select..." />
</label>
</div>
<div class="mbsc-form-group mbsc-padding">
<p class="mbsc-thin">Use it on any input or non-mobiscroll form.</p>
</div>
</div>
<div class="demo-container">
<input id="demo-non-form" class="demo-non-form" placeholder="Please Select..." />
</div>
.demo-non-form {
width: 100%;
margin: 0 0 5px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 0;
font-family: arial, verdana, sans-serif;
font-size: 14px;
box-sizing: border-box;
-webkit-appearance: none;
}
.demo-container {
padding: 0 1em;
}
Measurement - Convert Currency
Change demo
Convert Currency
JQuery Custom currency scroller with conversion functions for currency exchange. Use it for live value exchange. For jQuery or jQuery Mobile.
$(function () {
$('#demo').mobiscroll().measurement({
theme : ',
themeVariant : ' ,
lang : ' ,
units: ['EUR', 'USD', 'GBP', 'CHF'],
defaultUnit: 'EUR',
min : 0,
max : 150,
step : 0.05,
convert : function (val, unit1, unit2) {
var multipliers = {
EUR: 1,
GBP: 0.772,
CHF: 1.105,
USD: 1.110
};
return val * multipliers[unit2] / multipliers[unit1];
}
});
});
<input id="demo" placeholder="Please Select ..." />
Measurement - Currency
Change demo
Currency
JQuery Monetary value picker with multiple currencies and conversion turned off. Use it without live conversion. For jQuery or jQuery Mobile.
$(function () {
$('#demo').mobiscroll().measurement({
theme : ',
themeVariant : ' ,
lang : ' ,
units: ['EUR', 'USD', 'GBP', 'CHF'],
defaultUnit: 'EUR',
min : 0,
max : 1000,
step : 0.05,
convert : false,
minWidth : 72
});
});
<input id="demo" placeholder="Please Select ..." />
Measurement - Event handlers
Change demo
Event handlers
JQuery Measurement scroller demo with event hooks for custom integration and functionality. With source code. For jQuery or jQuery Mobile.
$(function () {
$('#demo').mobiscroll().measurement({
theme : ',
themeVariant : ' ,
lang : ' ,
onInit : function (event, inst) {
// Your custom event handler goes here
},
onMarkupReady : function (event, inst) {
// Your custom event handler goes here
},
onBeforeShow : function (event, inst) {
// Your custom event handler goes here
},
onPosition : function (event, inst) {
// Your custom event handler goes here
},
onShow : function (event, inst) {
// Your custom event handler goes here
},
onSet : function (event, inst) {
// Your custom event handler goes here
},
onItemTap : function (event, inst) {
// Your custom event handler goes here
},
onDestroy : function (event, inst) {
// Your custom event handler goes here
},
onClose : function (event, inst) {
// Your custom event handler goes here
},
onChange : function (event, inst) {
// Your custom event handler goes here
},
onCancel : function (event, inst) {
// Your custom event handler goes here
},
onBeforeClose : function (event, inst) {
// Your custom event handler goes here
},
onClear : function (event, inst) {
// Your custom event handler goes here
}
});
});
<input id="demo" placeholder="Please Select..." />
Measurement - Display modes
Change demo
Display modes
JQuery Measurement scroller with top, bottom slide up, popup, center, modal, bubble and inline embeddable display. For jQuery or jQuery Mobile.
mobiscroll.settings = {
lang : ' ,
theme : ',
themeVariant : '
};
$(function () {
$('#demo-bottom').mobiscroll().measurement({
display : 'bottom'
});
$('#demo-top').mobiscroll().measurement({
display : 'top'
});
$('#demo-center').mobiscroll().measurement({
display : 'center'
});
$('#demo-bubble').mobiscroll().measurement({
display : 'bubble'
});
$('#demo-inline').mobiscroll().measurement({
display : 'inline'
});
});
<div mbsc-form>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Try different display modes</div>
<label>
Bottom
<input mbsc-input id="demo-bottom" placeholder="Please Select..." />
</label>
<label>
Top
<input mbsc-input id="demo-top" type="text" placeholder="Please Select..." />
</label>
<label>
Center
<input mbsc-input id="demo-center" type="text" placeholder="Please Select..." />
</label>
<label>
Bubble
<input mbsc-input id="demo-bubble" type="text" placeholder="Please Select..." />
</label>
</div>
<div class="mbsc-form-group mbsc-padding">
<p class="mbsc-thin">With inline display you can embed the Measurement component in almost any markup or form.</p>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Embedded measurement scroller</div>
<div id="demo-inline"></div>
</div>
</div>
Measurement - Theming capabilities
Change demo
Theming capabilities
The look and feel of the measurement can be deeply customized. There are four levels of customization:
Base themes: Choose between Mobiscroll, iOS, Android Material and Windows.
Light or dark: Every theme has a light and dark variant. Setting the themeVariant to 'auto' will switch based on system settings.
Custom themes: Use the theme builder to customize the colors and make it match your brand.
Custom CSS: If you need further customization, the sky is the limit with CSS overrides.
You can also see how every example looks by changing the theme in the floating action bar on the right side .
mobiscroll.settings = {
lang : ' ,
theme : ',
themeVariant : '
};
$(function () {
$('#demo-ios').mobiscroll().measurement({
theme : 'ios',
themeVariant : 'light',
display : 'bubble',
touchUi : false
});
$('#demo-ios-dark').mobiscroll().measurement({
theme : 'ios',
themeVariant : 'dark',
display : 'bubble',
touchUi : false
});
$('#demo-ios-custom').mobiscroll().measurement({
theme : 'ios-gray',
display : 'bubble',
touchUi : false
});
$('#demo-material').mobiscroll().measurement({
theme : 'material',
themeVariant : 'light',
display : 'bubble',
touchUi : false
});
$('#demo-material-dark').mobiscroll().measurement({
theme : 'material',
themeVariant : 'dark',
display : 'bubble',
touchUi : false
});
$('#demo-material-custom').mobiscroll().measurement({
theme : 'material-indigo',
display : 'bubble',
touchUi : false
});
$('#demo-windows').mobiscroll().measurement({
theme : 'windows',
themeVariant : 'light',
display : 'bubble',
touchUi : false
});
$('#demo-windows-dark').mobiscroll().measurement({
theme : 'windows',
themeVariant : 'dark',
display : 'bubble',
touchUi : false
});
$('#demo-windows-custom').mobiscroll().measurement({
theme : 'windows-yellow',
display : 'bubble',
touchUi : false
});
$('#demo-mobiscroll').mobiscroll().measurement({
theme : 'mobiscroll',
themeVariant : 'light',
display : 'bubble',
touchUi : false
});
$('#demo-mobiscroll-dark').mobiscroll().measurement({
theme : 'mobiscroll',
themeVariant : 'dark',
display : 'bubble',
touchUi : false
});
$('#demo-mobiscroll-custom').mobiscroll().measurement({
theme : 'mobiscroll-lime',
display : 'bubble',
touchUi : false
});
});
<div style="max-width:1000px;margin:0 auto;" mbsc-page> <div mbsc-form>
<div class="mbsc-grid mbsc-grid-fixed">
<div class="mbsc-row">
<div class="mbsc-col-sm-12 mbsc-col-md-6">
<div class="mbsc-form-group-inset">
<div class="mbsc-form-group-title">iOS Theme</div>
<label>
Light
<input mbsc-input id="demo-ios" placeholder="Please Select..." />
</label>
<label>
Dark
<input mbsc-input id="demo-ios-dark" placeholder="Please Select..." />
</label>
<label>
Custom
<input mbsc-input id="demo-ios-custom" placeholder="Please Select..." />
</label>
</div>
</div>
<div class="mbsc-col-sm-12 mbsc-col-md-6">
<div class="mbsc-form-group-inset">
<div class="mbsc-form-group-title">Material Theme</div>
<label>
Light
<input mbsc-input id="demo-material" placeholder="Please Select..." />
</label>
<label>
Dark
<input mbsc-input id="demo-material-dark" placeholder="Please Select..." />
</label>
<label>
Custom
<input mbsc-input id="demo-material-custom" placeholder="Please Select..." />
</label>
</div>
</div>
</div>
<div class="mbsc-row">
<div class="mbsc-col-sm-12 mbsc-col-md-6">
<div class="mbsc-form-group-inset">
<div class="mbsc-form-group-title">Windows Theme</div>
<label>
Light
<input mbsc-input id="demo-windows" placeholder="Please Select..." />
</label>
<label>
Dark
<input mbsc-input id="demo-windows-dark" placeholder="Please Select..." />
</label>
<label>
Custom
<input mbsc-input id="demo-windows-custom" placeholder="Please Select..." />
</label>
</div>
</div>
<div class="mbsc-col-sm-12 mbsc-col-md-6">
<div class="mbsc-form-group-inset">
<div class="mbsc-form-group-title">Mobiscroll Theme</div>
<label>
Light
<input mbsc-input id="demo-mobiscroll" placeholder="Please Select..." />
</label>
<label>
Dark
<input mbsc-input id="demo-mobiscroll-dark" placeholder="Please Select..." />
</label>
<label>
Custom
<input mbsc-input id="demo-mobiscroll-custom" placeholder="Please Select..." />
</label>
</div>
</div>
</div>
</div>
</div>
</div>
Looking for something you didn't see or have a sales question?
Ask us anything
Customize & try demos locally
Sign in or start your free trial
What framework are you using?
Javascript
jQuery
AngularJS
Angular
Ionic
React
Other
Select a framework
Customize & try this demo locally
Sign in or start your free trial
Install demo in your app
Follow this quick, two minute install guide
Close window
Customize & try demos locally
How would you like to do it?
Install demo in your app
Follow this quick, two minute install guide
Close window
Thanks for downloading
Try and customize the app locally
Extract the zip file and run the project like any Ionic app. Make sure to have Ionic CLI installed and open the terminal in the app root folder.
Step 1. Run in root folder
$ npm install
Step 2. Start the app
$ ionic serve
Let us know if we can help and enjoy!
Change your password
Need to update your password? Enter and hit the button below
Change your password
Need to update your password? Enter and hit the button below
Your password has been changed!
Thanks for downloading
Customize demos locally
Everything is set up so that you can dig in right away and start exploring.
We have set up a trial so that you can try the demos locally.
Extract the zip file and open the demo in your favorite browser.
To install Mobiscroll in your project
follow instructions from this page .
Thanks for downloading
Customize demos locally
Please extract the zip file and run the project like any Angular CLI app.
Make sure to have the Angular CLI installed.
For installation and usage, extract the zip file and open a terminal window and follow these steps.
Step 1. Run in root folder
$ npm install
Step 2. Start the app
$ ng serve --open
Let us know if we can help and enjoy! 👍
Thanks for downloading
Customize demos locally
Everything is set up so that you can dig in right away and start exploring.
We have set up a trial so that you can try the demos locally.
The easiest way to get started is to follow the installation steps and by
grabbing the code directly from the demo page. Let us know if we can help and enjoy!
Thanks for downloading
Customize demos locally
Everything is set up so that you can dig in right away and start exploring.
We have set up a trial so that you can try the demos locally.
The demos are using Babel's in-browser ES6 and JSX transformer.
Extract the zip file and open the demo in your browser. To install Mobiscroll in your project
follow instructions from this page .