Back to Top
The nuts and bolts for
Creative web development

DMXzone Slider

“Improve your site usability with a great looking Slider Control”
Enrich your website forms with DMXzone Slider by adding awesome sliders as user controls for optimal experience, usability and data validation! Select horizontal or vertical orientation and follow the creation process directly in Dreamweaver. It is supplied with 24 CSS designs, fully customizable and easy to select with our built in style picker.

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. 

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


  • ATV Store Showcase

    For this ATV Store showcase we used HTML5 Data Bindings and DMXzone Database Connector in order to retrieve the products from the database and also DMXzone Slider, which you can drag so that you can ...

  • Smart Temperature App Showcase

    For this smart temperature web app we have the temperature value stored in a database, which can be changed by dragging the slider. Also the background color changes according to the temperature ...

  • Custom Notebook Showcase

    For this showcase we used DMXzone Slider and added user controls for optimal experience, when choosing the HDD, RAM and screen parameters.

  • 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


Requirements

Type: Suite
License: External link
Product: Dreamweaver CS3, Dreamweaver CS4, Dreamweaver CS5/CS5.5 and CS6, Dreamweaver CS5.5, Dreamweaver CC
Platform: Win XP/2000/2003/2008/7, Mac OS X, Mac OS X 10.4+
Browser: Opera 9.5, Chrome 9+, IE 8, Safari 4+, Opera 10+, iPad, IE 9, Safari 5+, Firefox 4+, Chrome 10+, Opera 11
Used Technologies: jQuery UI, CSS
Screen Shot: Details...
Tags: slider, jqueryUI, css, dreamweaver, extension


History

Version 1.1.3

Version 1.1.2

  • Full Dreamweaver CC and Extension Manager CC support
  • Included new Behavior Connector with restyled UI and better Mac OSX Support
  • Updated the automatic file copy and update component for better Dreamweaver CC support
  • Improved compatibility with the latest jQuery
  • Included latest jQuery 1.10.1
  • Improved Windows 8 compatibility

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

George PetrovGeorge 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.

See All Postings From George Petrov >>

Share this Article