How can we define the start position for the scroller or elements based on the scroller component? For example, if we have min:100 and max:10000 how can we set the start position to 500 without setting that as a field value. Basically, since we know the most common choice will be within 400-600 (in this example), I want to limit the amount of scrolling the user has to do by starting at 500. How do I do that? For both wheels on a scroller?
Hello @Brook_Davies 
You can do it with the parseValue function, which returns an array containing the selected scroller wheel values. For example:
parseValue: function (val) {
...
return [400, 600];
}
We have an example for this use case, you can take a look here: JQuery Scroller Date range Example | Mobiscroll
This doesn’t actually work for me, since the mobiscoll component is instantiated on a text field that has a value in it. The parseValue() method does not reflect that the form element has a value. I have tried using a beforeShow hook to set the value via setVal(), however, on the scroller element, I do not seem to be able to set the second scroll value.
Maybe I am going about this wrong. This is for a custom blood pressure scroller. The only way I could figure out how to make the component work so it looks like this:
and outputs to the textfield like this “60 / 30”:
Was to use the following code. But I feel like its ugly, settings the 2nd wheel to “/ 30” in order to get the output “60 / 30” but I couldn’t figure out a better way.
// blood pressure values
var bp_systolic=[];
for (var e=60;e<220;e++){
bp_systolic.push(
{ value: e,display: e}
)
}
var bp_diastolic=[];
for (var e=30;e<120;e++){
bp_diastolic.push(
{ value: '/ '+e,display: e}
)
}
$myTextEl.mobiscroll().scroller({
onBeforeShow: function (event, inst) {
// if the text field is empty, set default...
if ($myTextEl.attr('value') == ''){
inst.setVal('120 / 80')
}else{
// otherwise use the value from the text field
inst.setVal($myTextEl.attr('value'))
}
},
parseValue: function(val){
if (val==''){
return ['120','/ 80'];
}
}
,
responsive: {
small: {
display: 'bottom'
},
medium: {
display: 'bubble'
},
large: {
display: 'bubble'
}
},
showLabel: true,
wheels: [
[
{
label: 'Systolic',
data: bp_systolic
}, {
label: 'Diastolic',
data: bp_diastolic
}]
]
});
The problem is, while I can set a default value, if the form element has value set in it, it does not get picked up and shown as the default. So I am trying to figure out how to set the mobiscroll component value to the form element value (when the form element value is set on the fly) and also to ask if there is a better way to format the wheel values than how I am doing it here. Thank you!!
I notice there is a very similar problem on your demo page:
If a date is typed into the field, and then “show picker” is selected, the component is not updated.
There seems to be a disconnect between the fields and the components that are bound to the fields. Values are not always mirrored. This is not exactly the same problem, but it does illustrate how form element values are not passed through to the mobiscroll element.
The parseValue function is not written correctly, because returns just a default value. The ’ / ’ does not have to be included in the wheel values. To display the ’ / ', you need to implement the formatValue function. And if these are written, you don’t have to use onBeforeShow. See this example:
var bp_systolic = [];
for (var e = 60; e < 220; e++) {
bp_systolic.push(
{ value: e, display: e }
)
}
var bp_diastolic = [];
for (var e = 30; e < 120; e++) {
bp_diastolic.push(
{ value: e, display: e }
)
}
$(function () {
$('#scroller').mobiscroll().scroller({
display: 'center',
parseValue: function (val) {
if (val) {
return val.split('/');
} else {
return ['120', '80'];
}
},
formatValue: function (data) {
return data[0] + ' / ' + data[1];
},
responsive: {
small: {
display: 'bottom'
},
medium: {
display: 'bubble'
},
large: {
display: 'bubble'
}
},
showLabel: true,
wheels: [
[
{
label: 'Systolic',
data: bp_systolic
}, {
label: 'Diastolic',
data: bp_diastolic
}]
]
});
});