Adding values to your DMXzone Slider dynamically is an easy job, just choose them from any dynamic data. Additionally, you can set range option to capture a range of values with two drag handles that can also be stored in hidden fields, when using the slider as form element.
Fully resizable and optimized for touch devices, the DMXzone Slider can control other DMXzone extensions such as Ajax Datagrid, HTML5 Slideshow and Advanced CSS Animator through the Behavior Connector.
Overview
Features Highlights:
- 24 CSS Designs included - You can simply choose one of the 24 amazing styles available or edit them through the CSS to fit your website perfectly.
- Fully customizable styles - Our slider is CSS based so you can easily make your own adjustments in the CSS from within Dreamweaver's CSS editor
- Horizontal and Vertical sliders - Change the orientation of the slider to horizontal or vertical your choice.
- Range slider - Set the range option 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.
- The slider can be navigated in Dreamweaver Live view! Note that this feature requires Dreamweaver CS3+
- Bind slider values to hidden fields - It allows you to automatically assign values to and from the slider to specified hidden fields. Very useful when using the slider as form element and saving the output to a database with for example insert or update record server behavior
- Dynamic slider - Add values to your DMXzone Slider dynamically! Choose min and max value from any recordset.
* For complete Features overview press the Features in Detail
Property Search Demo
In this demo we will show you how with our DMXzone Slider you can add search properties to your page for better user experience for which we used three different slider types. The first one is a Range Slider with fixed minimum, the second one is a Non-Range Slider, and the third is a Range Slider.
Restaurant Reservation Demo
To show you how you can use and implement our new extension to your page here is a quick example. We used 3 sliders which are connected through the behavior connector. When you start steps 2 and 3 are disabled, so you have to go through step 1 to unlock step 2 and then for step 3.
Features
Features in Detail
- 24 CSS Designs included - You can simply choose one of the 24 amazing styles available or edit them through the CSS to fit your website perfectly.
- Easy to choose style picker - We've included a style picker where you can see a preview of the chosen design
- Fully customizable styles - Our slider is CSS based so you can easily make your own adjustments in the CSS from within Dreamweaver's CSS editor
- Horizontal and Vertical sliders - Change the orientation of the slider to horizontal or vertical your choice.
- Range slider - Set the range option 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.
- Range slider with fixed minimum - Set the range minimum so your users can only select value to the maximum.
- Range slider with fixed maximum - Set the range maximum so your users can only select a minimum value.
- The slider can be navigated in Dreamweaver Live view! Note that this feature requires Dreamweaver CS3+
- Bind slider values to hidden fields - It allows you to automatically assign values to and from the slider to specified hidden fields. Very useful when using the slider as form element and saving the output to a database with for example insert or update record server behavior
- Dynamic slider - Add values to your DMXzone Slider dynamically! Choose min and max value from any recordset.
- Fully resizable - The length of the slider expands depending on the container that it's in if set to 100% but also it can be set manually.
- Optimized for Touch devices - Now you can drag the slider with your thumb on touch devices like iPad and iPhone and it will respond directly!
- Inline property inspector - You can easily change all the visual options later on
- Fully controllable by behaviors - If you want to enable/disable the slider, set value, copy value of slider to text field and more - it can be easily done with the Control DMXzone slider behavior
- Full support for the DMXzone Behavior Connector - You can easily bind other DMXzone extensions like Advanced CSS Animator, Sliding Billboard, HTML5 MP3 player and Universal CSS Transforms to your slider.
- Great Dreamweaver integration - Interactive dialog in Dreamweaver with all the options you'll need.
Showcases
-
Concept Car Gallery Showcase
For this showcase we used DMXzone Supersized in order to present the product images in full screen. When dragged, the DMXzone Slider changes the picture, which fades in/out with the help of Advanced ...
-
Apartments and Houses Showcase
This showcase features Advanced CSS Animator that is connected to the DMXzone Slider so that you can navigate the panoramic image and explore it fully.
-
360 Degrees View Showcase
In this showcase, we used 36 images, each photographed with 10 interval and added them to an HTML5 Slideshow. In order to simulate the rotation, we connected the horizontal DMXzone Slider to the ...
-
Restaurant Reservation Showcase
To show you how you can use and implement our new extension to your page here is a quick example. We used 3 sliders which are connected through the behavior connector. When you start steps 2 and 3 ...
-
Property Search Showcase
In this showcase we will show you how with our DMXzone Slider you can add search properties to your page for better user experience for which we used three different slider types. The first one is ...
Videos
Adding DMXzone Slider on a Website
With this movie we will show you how to insert DMXzone Slider on your website.
Creating Range Selector with DMXzone Slider
With this movie we will show you how to create a range selector using DMXzone Slider.
Show the DMXzone Slider Value into a Text Field
With this movie we will teach you how to show the DMXzone Slider value into a text field while dragging its handle.
Controlling HTML5 Slideshow with DMXzone Slider
With this movie we will show you how to control the HTML5 Slideshow with DMXzone Slider.
Using DMXzone Slider to Filter Ajax Datagrid
With this movie we will show you how to use DMXzone Slider in order to filter Ajax Datagrid.
Showing DMXzone Slider Value into a Tooltip
In this movie we will show you how to display the DMXzone Slider value in Advanced Tooltips.
Using DMXzone Slider with Advanced CSS Animator
Controlling HTML5 MP3 Player with DMXzone Slider
Showing DMXzone Slider Value into a Tooltip
Using DMXzone Slider to Filter Ajax Datagrid
Controlling HTML5 Slideshow with DMXzone Slider
Show the DMXzone Slider Value into a Text Field
Creating Range Selector with DMXzone Slider
Adding DMXzone Slider on a Website
Requirements
The DMXzone Slider runs on Dreamweaver 8 but we do not support it officially.
History
Version 1.1.1
- Included updated jQuery UI to 1.10.1 for more speed, power and greater user experience
- Included updated jQuery to 1.8.3 that includes the unbelievable 13 versions
- Updated jQuery UI Themes
- Improved support for new addition styling themes, like the DMXzone Metro UI Theme Pack
- Improved style picker dialog to pick up automatically new available styles
George Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. His expertise in countless languages and technologies gives inspiration and teach valuable lessons on his website – DMXzone.com, which is visited daily by more than 30.000 people and is most popular for its over high-quality Dreamweaver extensions and templates.
