WHY SMARTY?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.

RECENTLY VISITED
CONTACT INFO
  • Address: PO Box 21132, Here Weare St,
    Melbourne, Vivas 2355 Australia
  • Phone: 1-800-565-2390
  • Email: support@yourname.com

Smarty Material Design

power of google material

EXPLORE COMPONENTS

MATERIAL COMPONENTS

MATERIAL : SLIDERS

The Material Design Lite (MDL) slider component is an enhanced version of the new HTML5 <input type="range"> element. A slider consists of a horizontal line upon which sits a small, movable disc (the thumb) and, typically, text that clearly communicates a value that will be set when the user moves it.

Sliders are a fairly new feature in user interfaces, and allow users to choose a value from a predetermined range by moving the thumb through the range (lower values to the left, higher values to the right). Their design and use is an important factor in the overall user experience.

HOW TO ENABLE MATERIAL 
1. Add to html head, BEFORE essentials.css:

<link href="assets/plugins/mdl/material.indigo-blue.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


2. Add .enable-materialdesign class to body:
<body class="smoothscroll enable-animation enable-materialdesign">


NOTE: if you don't need 'Material Design Lite' javascript plugin, skip step 2 
(.enable-materialdesign class is used by assets/js/scripts.js to load MDL plugin from assets/plugins/mdl/)

COLOR SCHEME: We use blue as default color scheme. You can create your own material design color:
Click to create your material design color

Credits: MDL official

Default slider

Starting value
Show Code 
<!-- Default Slider -->
<input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="0" tabindex="0">

<!-- Slider with Starting Value -->
<input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="25" tabindex="0">

Volume Control
Show Code 
<!-- Volume Control -->
<input class="mdl-slider mdl-js-slider" type="range" min="0" max="10" value="4" step="2">
MDL class Effect Remarks
mdl-slider Defines input element as an MDL component Required
mdl-js-slider Assigns basic MDL behavior to input element Required