How can I add range selector in user interface?

Hello ,

We cant replicate the exact wireframe in Appian but you can try executing below code.

load(
local!startmileValue,
local!endmileValue,
{
a!columnsLayout(
columns: {
a!columnLayout(
contents: {
a!columnsLayout(
columns: {
a!columnLayout(
contents: {
a!milestoneField(
label: "Start Range",
steps: {
10,
20,
30,
40
},
active: local!startmileValue
)
}
),
a!columnLayout(
contents: {
a!milestoneField(
label: "End Range",
steps: {
10,
20,
30,
40
},
active: local!endmileValue
)
}
)
}
)
},
width: "MEDIUM"
)
}
),
a!columnsLayout(
columns: {
a!columnLayout(
contents: {
a!columnsLayout(
columns: {
a!columnLayout(
a!dropdownField(
label: "",
labelPosition: "ABOVE",
placeholderLabel: "start range",
choiceLabels: {
"10",
"20",
"30",
"40"
},
choiceValues: {
1,
2,
3,
4
},
saveInto: {
a!save(
local!startmileValue,
save!value
)
},
validations: {}
)
),
a!columnLayout(
contents: a!textField(
value: "to",
readOnly: true,
align: "CENTER"
)
),
a!columnLayout(
a!dropdownField(
label: "",
labelPosition: "ABOVE",
placeholderLabel: "end range",
choiceLabels: {
"10",
"20",
"30",
"40"
},
choiceValues: {
1,
2,
3,
4
},
saveInto: {
a!save(
local!endmileValue,
save!value
)
},
validations: {}
)
)
}
)
},
width: "MEDIUM"
)
},
alignVertical: "MIDDLE"
)
}
)

Do tell if it helps.

Thanks Singh002 . It is working for selecting dropdowns. But is there any way we can drag the range in a bar or something?

Hi

AFAIK , Appian doesn't have any function like dragging the bar.

Thanks everyone for your response.