Fork me on GitHub

Default slider

jQuery UI slider. Default behavior.

slider = factory('#field:slider', value=20, props={
    'label': 'Default Slider',
})

Range with fixed minimum

Fix the minimum value of the range slider so that the user can only select a maximum. Set the range option to 'min'.

slider = factory('#field:slider', value=37, props={
    'label': 'Range with fixed minimum',
    'range': 'min',
    'min': 1,
    'max': 200,
    'show_value': True,
    'unit': 'Pieces',
})
Pieces: 37

Range with fixed maximum

Fix the maximum value of the range slider so that the user can only select a minimum. Set the range option to 'max'.

slider = factory('#field:slider', value=2, props={
    'label': 'Range with fixed maximum',
    'range': 'max',
    'min': 1,
    'max': 10,
    'show_value': True,
    'unit': 'Minimum number',
})
Minimum number: 2

Range slider

Set the range option to true to capture a range of values with two drag handles. The space between the handles is filled with a different background color to indicate those values are selected.

slider = factory('#field:slider', value=[75, 300], props={
    'label': 'Range slider',
    'range': True,
    'min': 0,
    'max': 500,
    'show_value': True,
    'unit': 'Price range (EUR)',
})
Price range (EUR): 75 - 300

Step slider

Increment slider values with the step option set to an integer, commonly a dividend of the slider's maximum value. The default increment is '1'.

slider = factory('#field:slider', value=100, props={
    'label': 'Step slider',
    'min': 0,
    'max': 500,
    'step': 50,
    'show_value': True,
    'unit': 'Donation (50 EUR increments)',
})
Donation (50 EUR increments): 100

Vertical slider

Change the orientation of the slider to vertical. Assign a height value via height or by setting the height through CSS, and set the orientation option to vertical.

slider = factory('#field:slider', value=50, props={
    'label': 'Vertical slider',
    'orientation': 'vertical',
    'show_value': True,
    'height': 200,
    'unit': 'mmHg',
})
mmHg: 50