Slider - Features


About this example


DJME2 Slider is a flexible UI component that allows users to select a value or a range of values from a defined range using a smooth or step-based slider. The control is completely customizable in terms of appearance and offers numerous configuration options like orientation, click offset etc. Key Features:

  • Horizontal/Vertical Orientation - depending on your needs, Slider can be displayed horizontally or vertically on the page by setting the Orientation property.
  • Direction - you can configure the Slider to reverse its standard direction using its IsDirectionReversed property.
  • Range slider - The Slider can display one or two dragHandles thus providing you with the ability to select a single value or a range of values from a defined range.
  • Decrease/Increase/Drag Handles - The slider layout can be customized using one of the handle properties that control which slider handles will be displayed - Increase Handle, Decrease Handle or Drag Handle.
  • Slider Animation - you can create smooth slide animations to a specified point without any browser interference. The animation duration is defined in milliseconds.
  • MouseWheel Support - grabbing and dragging can be annoying at times, so that's why mouse wheel support could be a very nice alternative. When users move the mouse wheel over the slider, its default value the will change. That value will increase/decrease with one SmallChange, which is again configurable. The MouseWheel support is available only of the one dragHanle mode of the Slider, that is, when IsSelectionRangeEnabled property is set to "false".
  • LargeChange - you can define the change in value of the distance, at which the slider will jump slider when the user clicks on the track. In its default mode, the slider will automatically scroll to the value which has been clicked by the user.
  • View-Only Mode - in some cases you might need to simply display the slider as disabled, and prohibit changes in its value.
  • Advanced Skinning - The visual appearance of Slider can be easily customized through skins. You can use one of the predefined skins or create your own.