formstone/docs/json/range.json

Library of modular front end components.

{"main":["range.js","range.css"],"options":[{"name":"customClass","type":"string","default":"''","description":"Class applied to instance"},{"name":"fill","type":"boolean","default":"false","description":"Flag to draw fill"},{"name":"formatter","type":"function","default":"false","description":"Value format function"},{"name":"labels","type":"boolean","default":"true","description":"Flag to draw labels"},{"name":"labels.max","type":"string","description":"Max value label; defaults to max value"},{"name":"labels.min","type":"string","description":"Min value label; defaults to min value"},{"name":"theme","type":"string","default":"\"fs-light\"","description":"Theme class name"},{"name":"vertical","type":"boolean","default":"false"}],"events":[],"methods":[{"name":"defaults","description":"Extends plugin default settings; effects instances created hereafter.","params":[{"name":"options","type":"object","default":"{}","description":"New plugin defaults"}],"examples":["$.range(\"defaults\", { ... });"]},{"name":"destroy","description":"Removes plugin instance.","examples":["$(\".target\").range(\"destroy\");"]},{"name":"disable","description":"Disables target instance","examples":["$(\".target\").range(\"disable\");"]},{"name":"enable","description":"Enables target instance","examples":["$(\".target\").range(\"enable\");"]},{"name":"resize","description":"Resizes instance","examples":["$(\".target\").range(\"resize\");"]},{"name":"update","description":"Updates instance.","examples":["$(\".target\").range(\"update\");"]}],"name":"Range","type":"widget","description":"A jQuery plugin for cross browser range inputs.","dependencies":["jQuery","core.js","touch.js"],"css":[{"name":".fs-range-element","type":"element","description":"Target elmement"},{"name":".fs-range","type":"element","description":"Base widget class"},{"name":".fs-range.fs-range-focus","type":"modifier","description":"Indicates focused state"},{"name":".fs-range.fs-range-disabled","type":"modifier","description":"Indicates disabled state"},{"name":".fs-range.fs-range-labels","type":"modifier","description":"Indicates label display"},{"name":".fs-range.fs-range-vertical","type":"modifier","description":"Indicates vertical display"},{"name":".fs-range-track","type":"element","description":"Track elmement"},{"name":".fs-range-fill","type":"element","description":"Fill elmement"},{"name":".fs-range-handle","type":"element","description":"Handle elmement"},{"name":".fs-range-marker","type":"element","description":"Marker elmement"},{"name":".fs-range-label","type":"element","description":"Label elmement"},{"name":".fs-range-label_min","type":"element","description":"Minimum label elmement"},{"name":".fs-range-label_max","type":"element","description":"Maximum label elmement"}],"use":"### Basic\n\nRange will convert an input into a customizable slider interface:\n\n```javascript\n$(\"input[type=range]\").range();\n```\n\n```markup\n<input type=\"range\">\n```\n\n### Limits\n\nRange will automatically detect the minimum, maximum and increment values based on the `min`, `max` and `step` attributes:\n\n```markup\n<input type=\"range\" min=\"2\" max=\"20\" step=\"2\">\n```\n\n### Vertical\n\nCreate a vertical slider with the `orient` attribute:\n\n```markup\n<input type=\"range\" orient=\"vertical\">\n```","demo":"<h4>Basic</h4>\r\n\r\n<!-- START: FIRSTDEMO -->\r\n\r\n<div class=\"demo_container\">\r\n  <div class=\"demo_example\">\r\n    <form action=\"#\" method=\"GET\" class=\"form demo_form\">\r\n      <fieldset class=\"form_fieldset\">\r\n        <input type=\"range\" class=\"form_input\">\r\n      </fieldset>\r\n    </form>\r\n  </div>\r\n  <div class=\"demo_code\">\r\n    <pre><code class=\"language-html\">&lt;input type=&quot;range&quot; name=&quot;range&quot;&gt;</code></pre>\r\n    <pre><code class=\"language-javascript\">$(\"input[type='range']\").range();</code></pre>\r\n  </div>\r\n</div>\r\n\r\n<!-- END: FIRSTDEMO -->\r\n\r\n<h4>Disabled</h4>\r\n<div class=\"demo_container\">\r\n  <div class=\"demo_example\">\r\n    <form action=\"#\" method=\"GET\" class=\"form demo_form\">\r\n      <fieldset class=\"form_fieldset\">\r\n        <input type=\"range\" class=\"form_input\" disabled>\r\n      </fieldset>\r\n    </form>\r\n  </div>\r\n  <div class=\"demo_code\">\r\n    <pre><code class=\"language-html\">&lt;input type=&quot;range&quot; name=&quot;range&quot; disabled&gt;</code></pre>\r\n    <pre><code class=\"language-javascript\">$(\"input[type='range']\").range();</code></pre>\r\n  </div>\r\n</div>\r\n\r\n<h4>Custom Labels</h4>\r\n<div class=\"demo_container\">\r\n  <div class=\"demo_example\">\r\n    <form action=\"#\" method=\"GET\" class=\"form demo_form\">\r\n      <fieldset class=\"form_fieldset\">\r\n        <input type=\"range\" class=\"form_input\" data-range-options='{\"labels\":{\"min\":\"Min\",\"max\":\"Max\"}}'>\r\n      </fieldset>\r\n    </form>\r\n  </div>\r\n  <div class=\"demo_code\">\r\n    <pre><code class=\"language-html\">&lt;input type=&quot;range&quot; name=&quot;range&quot;&gt;</code></pre>\r\n    <pre><code class=\"language-javascript\">$(\"input[type='range']\").range({\r\n  labels: {\r\n    min: \"Min\",\r\n    max: \"Max\"\r\n  }\r\n});</code></pre>\r\n  </div>\r\n</div>\r\n\r\n<h4>No Labels</h4>\r\n<div class=\"demo_container\">\r\n  <div class=\"demo_example\">\r\n    <form action=\"#\" method=\"GET\" class=\"form demo_form\">\r\n      <fieldset class=\"form_fieldset\">\r\n        <input type=\"range\" class=\"form_input\" data-range-options='{\"labels\":false}'>\r\n      </fieldset>\r\n    </form>\r\n  </div>\r\n  <div class=\"demo_code\">\r\n    <pre><code class=\"language-html\">&lt;input type=&quot;range&quot; name=&quot;range&quot;&gt;</code></pre>\r\n    <pre><code class=\"language-javascript\">$(\"input[type='range']\").range({\r\n  labels: false\r\n});</code></pre>\r\n  </div>\r\n</div>\r\n\r\n<h4>Custom Range</h4>\r\n<div class=\"demo_container\">\r\n  <div class=\"demo_example\">\r\n    <form action=\"#\" method=\"GET\" class=\"form demo_form\">\r\n      <fieldset class=\"form_fieldset\">\r\n        <input type=\"range\" class=\"form_input\" min=\"25\" max=\"75\" step=\"5\">\r\n      </fieldset>\r\n    </form>\r\n  </div>\r\n  <div class=\"demo_code\">\r\n    <pre><code class=\"language-html\">&lt;input type=&quot;range&quot; name=&quot;range&quot; min=&quot;25&quot; max=&quot;75&quot; step=&quot;5&quot;&gt;</code></pre>\r\n    <pre><code class=\"language-javascript\">$(\"input[type='range']\").range();</code></pre>\r\n  </div>\r\n</div>\r\n\r\n<h4>Fill</h4>\r\n<div class=\"demo_container\">\r\n  <div class=\"demo_example\">\r\n    <form action=\"#\" method=\"GET\" class=\"form demo_form\">\r\n      <fieldset class=\"form_fieldset\">\r\n        <input type=\"range\" class=\"form_input\" data-range-options='{\"fill\":true}'>\r\n      </fieldset>\n    </form>\n  </div>\n  <div class=\"demo_code\">\n    <pre><code class=\"language-html\">&lt;input type=&quot;range&quot; name=&quot;range&quot;&gt;</code></pre>\n    <pre><code class=\"language-javascript\">$(\"input[type='range']\").range({\n  fill: true\n});</code></pre>\n  </div>\n</div>\n\r\n\r\n<h4>Vertical</h4>\r\n<div class=\"demo_container\">\r\n  <div class=\"demo_example\">\r\n    <form action=\"#\" method=\"GET\" class=\"form demo_form\">\r\n      <fieldset class=\"form_fieldset\">\r\n        <input type=\"range\" class=\"form_input\" orient=\"vertical\">\r\n      </fieldset>\r\n    </form>\r\n  </div>\r\n  <div class=\"demo_code\">\r\n    <pre><code class=\"language-html\">&lt;input type=&quot;range&quot; name=&quot;range&quot; orient=&quot;vertical&quot;&gt;</code></pre>\r\n    <pre><code class=\"language-javascript\">$(\"input[type='range']\").range();</code></pre>\r\n  </div>\r\n</div>\r\n\r\n<h4>No Theme</h4>\r\n<div class=\"demo_container\">\r\n  <div class=\"demo_example\">\r\n    <form action=\"#\" method=\"GET\" class=\"form demo_form\">\r\n      <fieldset class=\"form_fieldset\">\r\n        <input type=\"range\" class=\"form_input\" data-range-options='{\"theme\":\"\"}'>\r\n      </fieldset>\r\n    </form>\r\n  </div>\r\n  <div class=\"demo_code\">\r\n    <pre><code class=\"language-html\">&lt;input type=&quot;range&quot; name=&quot;range&quot;&gt;</code></pre>\r\n    <pre><code class=\"language-javascript\">$(\"input[type='range']\").range({\r\n  theme: \"\"\r\n});</code></pre>\r\n  </div>\r\n</div>\r\n","document":"# Range\n\nA jQuery plugin for cross browser range inputs.\n\n<!-- HEADER END -->\n\n<!-- NAV START -->\n\n* [Use](#use)\n* [Options](#options)\n* [Methods](#methods)\n* [CSS](#css)\n\n<!-- NAV END -->\n\n<!-- DEMO BUTTON -->\n\n<a name=\"use\"></a>\n\n## Using Range\n\n\n#### Main\n\n```markup\nrange.js\nrange.css\n```\n\n\n#### Dependencies\n\n```markup\njQuery\ncore.js\ntouch.js\n```\n\n### Basic\n\nRange will convert an input into a customizable slider interface:\n\n```javascript\n$(\"input[type=range]\").range();\n```\n\n```markup\n<input type=\"range\">\n```\n\n### Limits\n\nRange will automatically detect the minimum, maximum and increment values based on the `min`, `max` and `step` attributes:\n\n```markup\n<input type=\"range\" min=\"2\" max=\"20\" step=\"2\">\n```\n\n### Vertical\n\nCreate a vertical slider with the `orient` attribute:\n\n```markup\n<input type=\"range\" orient=\"vertical\">\n```\n\n\n<a name=\"options\"></a>\n\n## Options\n\nSet instance options by passing a valid object at initialization, or to the public `defaults` method. Custom options for a specific instance can also be set by attaching a `data-range-options` attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `customClass` | `string` | `''` | Class applied to instance |\n| `fill` | `boolean` | `false` | Flag to draw fill |\n| `formatter` | `function` | `false` | Value format function |\n| `labels` | `boolean` | `true` | Flag to draw labels |\n| `labels.max` | `string` | &nbsp; | Max value label; defaults to max value |\n| `labels.min` | `string` | &nbsp; | Min value label; defaults to min value |\n| `theme` | `string` | `\"fs-light\"` | Theme class name |\n| `vertical` | `boolean` | `false` | &nbsp; |\n\n<hr>\n<a name=\"methods\"></a>\n\n## Methods\n\nMethods are publicly available to all active instances, unless otherwise stated.\n\n### defaults\n\nExtends plugin default settings; effects instances created hereafter.\n\n```javascript\n$.range(\"defaults\", { ... });\n```\n\n#### Parameters\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `options` | `object` | `{}` | New plugin defaults |\n\n### destroy\n\nRemoves plugin instance.\n\n```javascript\n$(\".target\").range(\"destroy\");\n```\n\n### disable\n\nDisables target instance\n\n```javascript\n$(\".target\").range(\"disable\");\n```\n\n### enable\n\nEnables target instance\n\n```javascript\n$(\".target\").range(\"enable\");\n```\n\n### resize\n\nResizes instance\n\n```javascript\n$(\".target\").range(\"resize\");\n```\n\n### update\n\nUpdates instance.\n\n```javascript\n$(\".target\").range(\"update\");\n```\n\n<hr>\n<a name=\"css\"></a>\n\n## CSS\n\n| Class | Type | Description |\n| --- | --- | --- |\n| `.fs-range-element` | `element` | Target elmement |\n| `.fs-range` | `element` | Base widget class |\n| `.fs-range.fs-range-focus` | `modifier` | Indicates focused state |\n| `.fs-range.fs-range-disabled` | `modifier` | Indicates disabled state |\n| `.fs-range.fs-range-labels` | `modifier` | Indicates label display |\n| `.fs-range.fs-range-vertical` | `modifier` | Indicates vertical display |\n| `.fs-range-track` | `element` | Track elmement |\n| `.fs-range-fill` | `element` | Fill elmement |\n| `.fs-range-handle` | `element` | Handle elmement |\n| `.fs-range-marker` | `element` | Marker elmement |\n| `.fs-range-label` | `element` | Label elmement |\n| `.fs-range-label_min` | `element` | Minimum label elmement |\n| `.fs-range-label_max` | `element` | Maximum label elmement |\n\n"}