Table of Contents
- Getting Started
- EO.Pdf
- EO.Web
- Overview
- Installation & Deployement
- EO.Web ToolTip
- EO.Web Rating
- EO.Web Slider & RangeSlider
- EO.Web ListBox
- EO.Web ComboBox
- EO.Web Captcha
- EO.Web ASPX To PDF
- EO.Web Slide
- EO.Web Flyout
- EO.Web EditableLabel
- EO.Web ImageZoom
- EO.Web Floater
- EO.Web Downloader
- EO.Web ColorPicker
- EO.Web HTML Editor
- EO.Web File Explorer
- EO.Web SpellChecker
- EO.Web Grid
- EO.Web MaskedEdit
- EO.Web Splitter
- EO.Web Menu
- EO.Web Slide Menu
- EO.Web TabStrip
- EO.Web TreeView
- EO.Web Calendar
- EO.Web Callback
- EO.Web MultiPage
- EO.Web Dialog
- EO.Web AJAXUploader
- EO.Web ProgressBar - Free!
- EO.Web ToolBar - Free!
- EO.WebBrowser
- EO.Wpf
- Common Topics
- Reference
| Tick Marks |
Overview
EO.Web Slider and RangeSlider can display tick marks on either side or both sides of the slider. The following image shows a slider with tick marks on both sides:
This section covers the following topics:
Tick Mark Position
EO.Web Slider and RangeSlider can display "large" tick marks and "small" tick marks. The "large" tick marks correspond to LargeChange, while "small" tick marks correspond to SmallChange. For example, if MinimumValue is 0, MaximumValue is 20, LargeChange is 5 and SmallChange is 1, then 5 "large" tick marks will be displayed at position 0, 5, 10, 15, and 20; with "small" tick marks displayed on all other numbers.
Use LargeTickPosition to specify how large tick mark should be displayed. The following table lists all the valid values:
| Value | Remarks |
| Auto | Same as Both. |
| TopLeft | Displays the large tick mark on the top side of the track only for horizontal slider, or on the left side only for vertical slider. |
| BottomRight | Displays the large tick mark on the bottom side of the track only for horizontal slider, or on the right side only for vertical slider. |
| Both | Displays the large tick mark on both sides of the slider. |
| None | Do not display any large tick marks. |
Use SmallTickPosition to specify how small tick marks should be displayed. The list of valid values for SmallTickPosition is the same as LargeTickPosition. However when SmallTickPosition is set to Auto, it is the same as None ( For LargeTickPosition, Auto is the same as Both).
Important: The corresponding tick mark image must be properly configured for the tick mark to be displayed. See below for more information on how to configure tick mark images.
Tick Mark Images
Tick mark images must be properly configured in order for tick marks to be displayed. Follow these points to configure tick mark images:
-
Use SmallTickImage.ImageUrl and Use LargeTickImage.ImageUrl to configure small tick and large tick image respectively. The following images show the small tick and large tick images used for the above screenshot:
Small tick image:
Large tick image:
-
Important: You must also set both Width and Height for the corresponding image property to the actual pixel width/height of the image. For example, the above small tick image's size is 1 by 13, thus if you use this image as small tick image, you must also set SmallTickImage.Width to 1 and SmallTickImage.Height to 13;
Tick Mark Value
EO.Web Slider and RangeSlider can display large tick mark values along with the large tick marks. The following image demonstrates this feature. Note the numbers above each tick mark:
Use LargeTickValuePosition to specify how large tick values should be displayed. When this property is set to Auto, it is the same as None.
Use LargeTickValueCssClass to specify the CSS class to be applied to the large tick values. For example, the following image demonstrates a slider using this property to change the font, color as well as padding-bottom for the tick values. padding-bottom is used to increase the distance between the track and the values.
There is no corresponding SmallTickValuePosition property since very rarely there would be enough space for each small value. However you can display a label for any value using tick mark labels.
