The Slider control allows a user to select a value or range of values in between a min and max range by dragging the cursor over the slider bar.
/* Default Slider */
new ac.inputs.Slider({ value: 11 }, "#cntlBasicDefault");
/* MidRange Slider */
new ac.inputs.Slider({ value: 11, type: "MinRange" }, "#cntlBasicMidRange");
/* Range Slider */
new ac.inputs.Slider({ value: [11, 22], type: "Range" }, "#cntlBasicRange");<div class="form-horizontal form-bordered">
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Default Slider</label>
<div class="col-lg-8" style="text-align: center">
<div id="cntlBasicDefault"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">MigRange Slider</label>
<div class="col-lg-8" style="text-align: center">
<div id="cntlBasicMidRange"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Range Slider</label>
<div class="col-lg-8" style="text-align: center">
<div id="cntlBasicRange"></div>
</div>
</div>
</div>/* Default Slider */
new ac.inputs.Slider(
{
value: 11,
tooltip: { isVisible: true, placement: "Before", showOn: "Focus" }
},
"#cntlTooltipDefault"
);
/* Range Slider */
new ac.inputs.Slider(
{
value: [11, 22],
type: "Range",
tooltip: { isVisible: true, placement: "Before", showOn: "Focus" }
},
"#cntlTooltipRange"
);<div class="form-horizontal form-bordered">
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Default Slider</label>
<div class="col-lg-8" style="text-align: center">
<div id="cntlTooltipDefault"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Range Slider</label>
<div class="col-lg-8" style="text-align: center">
<div id="cntlTooltipRange"></div>
</div>
</div>
</div>/* Default Slider */
new ac.inputs.Slider(
{
min: 0.1,
max: 0.9,
value: 0.7,
step: 0.05,
ticks: { placement: "Before", largeStep: 0.2, smallStep: 0.05, showSmallTicks: true }
},
"#cntlTicksDefault"
);
/* Range Slider */
new ac.inputs.Slider(
{
min: 10,
max: 90,
value: [25, 60],
step: 5,
type: "Range",
ticks: { placement: "Before", largeStep: 20, smallStep: 5, showSmallTicks: true }
},
"#cntlTicksRange"
);<div class="form-horizontal form-bordered">
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Default Slider</label>
<div class="col-lg-8" style="text-align: center">
<div id="cntlTicksDefault"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Range Slider</label>
<div class="col-lg-8" style="text-align: center">
<div id="cntlTicksRange"></div>
</div>
</div>
</div>/* Default Slider */
new ac.inputs.Slider(
{
min: 0,
max: 100,
value: 32,
step: 1,
type: "MinRange",
limits: { enabled: true, minStart: 11, minEnd: 60 },
tooltip: { isVisible: true, placement: "Before", showOn: "Focus" },
ticks: { placement: "Before", largeStep: 20, smallStep: 5, showSmallTicks: true }
},
"#cntlLimitsDefault"
);
/* Range Slider */
new ac.inputs.Slider(
{
min: 0,
max: 100,
value: [30, 65],
step: 1,
type: "Range",
limits: { enabled: true, minStart: 10, minEnd: 40, maxStart: 60, maxEnd: 90 },
tooltip: { isVisible: true, placement: "Before", showOn: "Focus" },
ticks: { placement: "Before", largeStep: 20, smallStep: 5, showSmallTicks: true }
},
"#cntlLimitsRange"
);<div class="form-horizontal form-bordered">
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Default Slider</label>
<div class="col-lg-8" style="text-align: center">
<div id="cntlLimitsDefault"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Range Slider</label>
<div class="col-lg-8" style="text-align: center">
<div id="cntlLimitsRange"></div>
</div>
</div>
</div>