2016

Creating Custom AngularJS Directives Series

<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 30px; font-weight: 300; line-height: 1.1; margin-bottom: 10.5px; margin-top: 21px; padding-bottom: 10px;">
Creating Custom AngularJS Directives Series</h2>
<ol style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px; margin-top: 0px;">
<li style="box-sizing: border-box;"><a href="http://weblogs.asp.net/dwahlin/archive/2014/04/29/creating-custom-angularjs-directives-part-i-the-fundamentals.aspx" style="background: transparent; box-sizing: border-box; color: #007fff; text-decoration: none;" target="_blank">The Fundamentals</a></li>
<li style="box-sizing: border-box;"><a href="https://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope" style="background: transparent; box-sizing: border-box; color: #007fff; text-decoration: none;" target="_blank" title="Creating Custom AngularJS Directives Part 2 – Isolate Scope">Isolate Scope</a></li>
<li style="box-sizing: border-box;"><a href="http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-3-isolate-scope-and-function-parameters" style="background: transparent; box-sizing: border-box; color: #007fff; text-decoration: none;" target="_blank" title="Isolate Scope and Function Parameters">Isolate Scope and Function Parameters</a></li>
<li style="box-sizing: border-box;"><a href="https://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-4-transclusion-and-restriction" style="background: transparent; box-sizing: border-box; color: #007fff; text-decoration: none;" target="_blank" title="Transclusion and Restriction">Transclusion and Restriction</a></li>
<li style="box-sizing: border-box;">The link() Function (coming soon)</li>
<li style="box-sizing: border-box;"><a href="http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-6-using-controllers" style="background: transparent; box-sizing: border-box; color: #007fff; text-decoration: none;" target="_blank" title="Using Controllers in Directives">Using Controllers</a></li>
<li style="box-sizing: border-box;"><a href="https://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-7-%E2%80%93-creating-a-unique-value-directive-using-asyncvalidators" style="background: transparent; box-sizing: border-box; color: #007fff; text-decoration: none;" target="_blank" title="Creating a Unique Value Directive using $asyncValidators">Creating a Unique Value Directive using $asyncValidators</a></li>
</ol>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<a href="http://www.angularjs.org/" style="background: transparent; box-sizing: border-box; color: #007fff; text-decoration: none;" target="_blank">AngularJS</a> provides many directives that can be used to manipulate the DOM, route events to event handler functions, perform data binding, associate controllers/scope with a view, plus much more. Directives such as <strong style="box-sizing: border-box;">ng-click</strong>, <strong style="box-sizing: border-box;">ng-show/ng-hide</strong>, <strong style="box-sizing: border-box;">ng-repeat</strong>,and many <a href="https://docs.angularjs.org/api/ng/directive" style="background: transparent; box-sizing: border-box; color: #007fff; text-decoration: none;" target="_blank">others</a> found in the AngularJS core script make it easy to get started using the framework.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
Although the built-in directives cover many different scenarios, there may be times when you find yourself needing custom directives and wondering how to get started writing them. In this series of posts I’ll provide a step-by-step look at how directives work and how you can get started using them. The overall goal is to move slowly and provide simple, digestible directive examples that get more and more involved as the series progresses.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
I assume that you already know what directives are and how they’re used. If you’re new to directives check out   <a href="http://weblogs.asp.net/dwahlin/archive/2013/08/15/angularjs-in-60-ish-minutes-the-ebook.aspx" style="background: transparent; box-sizing: border-box; color: #007fff; text-decoration: none;" target="_blank">AngularJS in 60ish Minutes video on YouTube (or get the eBook version)</a> or   new <a href="http://weblogs.asp.net/dwahlin/archive/2014/03/24/the-angularjs-jumpstart-video-training-course-has-been-released.aspx" style="background: transparent; box-sizing: border-box; color: #007fff; text-decoration: none;" target="_blank">AngularJS JumpStart</a>course.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<h2 style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 30px; font-weight: 300; line-height: 1.1; margin-bottom: 10.5px; margin-top: 21px; padding-bottom: 10px;">
Writing Custom Directives is Easy Right?</h2>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
AngularJS directives can be a bit intimidating the first time you see them. They offer many different options, have a few cryptic features (and cryptic is   politically correct term for “what were they thinking here?”), and are generally challenging at first. However, once you understand the pieces and how they fit together you’ll find that they’re not that bad. I compare it to learning to play an instrument. The first time you play a piano or guitar you aren’t very good and feel completely incompetent. However, after putting in the necessary practice time you end up getting pretty good and capable of handling more advanced music. It’s the same with directives – they take a little practice but you can do powerful things with them once you get the hang of it. I do look forward to the day where features found in the <a href="http://www.polymer-project.org/" style="background: transparent; box-sizing: border-box; color: #007fff; text-decoration: none;" target="_blank">Polymer</a> project and <a href="http://w3c.github.io/webcomponents/explainer/" style="background: transparent; box-sizing: border-box; color: #007fff; text-decoration: none;" target="_blank">Web Components</a> spec replace the directives that we write today. Check out those links if you want a glimpse into the future direction of directives.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<h2 style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 30px; font-weight: 300; line-height: 1.1; margin-bottom: 10.5px; margin-top: 21px; padding-bottom: 10px;">
Getting Started with Custom Directives</h2>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
Why would you want to write a custom directive? Let’s say that you’ve been tasked with converting a collection of customers into some type of grid that’s displayed in a view. Although you can certainly add DOM functionality into a controller to handle this, doing that would make it hard to test the controller and breaks the separation of concerns – you just don’t want to do that in an AngularJS application. Instead, that type of functionality should go into a custom directive. In another case you may have some data binding that occurs across many views and you want to re-use the data binding expressions. While a child view loaded with ng-include (more on this in a moment) could be used, directives also work well in this scenario. There are numerous other ways that custom directives can be used, these examples are only scratching the surface.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
Let’s start by looking an a very basic example of an AngularJS directive. Assume that we have the following module and controller defined in the application (I’ll refer to this module and controller in future posts as well):</div>
<pre class="csharpcode" style="background-color: white; border-radius: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; font-family: consolas, "Courier New", courier, monospace; font-size: small; line-height: 1.42857; margin-bottom: 10.5px; overflow: auto; padding: 10px; word-break: break-all; word-wrap: break-word;"><span class="kwrd" style="box-sizing: border-box; color: blue;">var</span> app = angular.module(<span class="str" style="box-sizing: border-box; color: #006080;">'directivesModule'</span>, []);

app.controller(<span class="str" style="box-sizing: border-box; color: #006080;">'CustomersController'</span>, [<span class="str" style="box-sizing: border-box; color: #006080;">'$scope'</span>, <span class="kwrd" style="box-sizing: border-box; color: blue;">function</span> ($scope) {
    <span class="kwrd" style="box-sizing: border-box; color: blue;">var</span> counter = 0;
    $scope.customer = {
        name: <span class="str" style="box-sizing: border-box; color: #006080;">'David'</span>,
        street: <span class="str" style="box-sizing: border-box; color: #006080;">'1234 Anywhere St.'</span>
    };
    
    $scope.customers = [
        {
            name: <span class="str" style="box-sizing: border-box; color: #006080;">'David'</span>,
            street: <span class="str" style="box-sizing: border-box; color: #006080;">'1234 Anywhere St.'</span>
        },
        {
            name: <span class="str" style="box-sizing: border-box; color: #006080;">'Tina'</span>,
            street: <span class="str" style="box-sizing: border-box; color: #006080;">'1800 Crest St.'</span>
        },
        {
            name: <span class="str" style="box-sizing: border-box; color: #006080;">'Michelle'</span>,
            street: <span class="str" style="box-sizing: border-box; color: #006080;">'890 Main St.'</span>
        }
    ];

$scope.addCustomer = <span class="kwrd" style="box-sizing: border-box; color: blue;">function</span> () {
        counter++;
        $scope.customers.push({
            name: <span class="str" style="box-sizing: border-box; color: #006080;">'New Customer'</span> + counter,
            street: counter + <span class="str" style="box-sizing: border-box; color: #006080;">' Cedar Point St.'</span>
        });
    };

$scope.changeData = <span class="kwrd" style="box-sizing: border-box; color: blue;">function</span> () {
        counter++;
        $scope.customer = {
            name: <span class="str" style="box-sizing: border-box; color: #006080;">'James'</span>,
            street: counter + <span class="str" style="box-sizing: border-box; color: #006080;">' Cedar Point St.'</span>
        };
    };
}]);</pre>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br style="box-sizing: border-box;" />Let’s say that we find ourselves writing out a data binding expression similar to the following over and over in views throughout the app:</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<pre class="csharpcode" style="background-color: white; border-radius: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; font-family: consolas, "Courier New", courier, monospace; font-size: small; line-height: 1.42857; margin-bottom: 10.5px; overflow: auto; padding: 10px; word-break: break-all; word-wrap: break-word;">Name: {{customer.name}} 
<br />
Street: {{customer.street}}</pre>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
One technique that can be used to promote re-use is to place the data binding template into a child view (I’ll call it <strong style="box-sizing: border-box;">myChildView.html</strong>) and reference it from within a parent view using the <strong style="box-sizing: border-box;">ng-include</strong> directive. This allows<strong style="box-sizing: border-box;">myChildView.html</strong> to be re-used throughout the application wherever it’s needed.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<pre class="csharpcode" style="background-color: white; border-radius: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; font-family: consolas, "Courier New", courier, monospace; font-size: small; line-height: 1.42857; margin-bottom: 10.5px; overflow: auto; padding: 10px; word-break: break-all; word-wrap: break-word;"><div ng-include=<span class="str" style="box-sizing: border-box; color: #006080;">"'myChildView.html'"</span>></div></pre>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
While this gets the job done, another technique that can be used is to place the data binding expression into a custom directive. To create a directive you first locate the target module that the directive should be placed in and then call it’s <strong style="box-sizing: border-box;">directive()</strong> function. The <strong style="box-sizing: border-box;">directive()</strong> function takes the name of the directive as well as a function. Here’s an example of a simple directive that embeds the data binding expression:</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<pre class="csharpcode" style="background-color: white; border-radius: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; font-family: consolas, "Courier New", courier, monospace; font-size: small; line-height: 1.42857; margin-bottom: 10.5px; overflow: auto; padding: 10px; word-break: break-all; word-wrap: break-word;">angular.module(<span class="str" style="box-sizing: border-box; color: #006080;">'directivesModule'</span>).directive(<span class="str" style="box-sizing: border-box; color: #006080;">'mySharedScope'</span>, <span class="kwrd" style="box-sizing: border-box; color: blue;">function</span> () {
    <span class="kwrd" style="box-sizing: border-box; color: blue;">return</span> {
        template: <span class="str" style="box-sizing: border-box; color: #006080;">'Name: {{customer.name}}<br /> Street: {{customer.street}}'</span>
    };
});</pre>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
Does this buy us much over using a child view along with the <strong style="box-sizing: border-box;">ng-include</strong> directive? Not at this point. However, directives can do a lot more with just a little code, plus they make it a piece of cake to attach the functionality they offer to an element. An example of attaching the <strong style="box-sizing: border-box;">mySharedScope </strong>directive to a <strong style="box-sizing: border-box;"><div></strong> element is shown next:</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<pre class="csharpcode" style="background-color: white; border-radius: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; font-family: consolas, "Courier New", courier, monospace; font-size: small; line-height: 1.42857; margin-bottom: 10.5px; overflow: auto; padding: 10px; word-break: break-all; word-wrap: break-word;"><span class="kwrd" style="box-sizing: border-box; color: blue;"><</span><span class="html" style="box-sizing: border-box; color: maroon;">div</span> <span class="attr" style="box-sizing: border-box; color: red;">my-shared-scope</span><span class="kwrd" style="box-sizing: border-box; color: blue;">></</span><span class="html" style="box-sizing: border-box; color: maroon;">div</span><span class="kwrd" style="box-sizing: border-box; color: blue;">></span></pre>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br style="box-sizing: border-box;" />When the directive is run it’ll output the following based on the data in the controller shown earlier:</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<strong style="box-sizing: border-box;">Name: David  <br style="box-sizing: border-box;" />Street: 1234 Anywhere St.</strong></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br style="box-sizing: border-box;" /><br style="box-sizing: border-box;" />The first thing you’ll probably notice is that the <strong style="box-sizing: border-box;">mySharedScope</strong> directive is referenced in the view by using <strong style="box-sizing: border-box;">my-shared-scope</strong>. Why is that? The answer is that directive names are defined use a camel-case syntax. For example, when you use the <strong style="box-sizing: border-box;">ngRepeat</strong> directive you use the hyphenated version of the name: <strong style="box-sizing: border-box;">ng-repeat</strong>.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
Another interesting thing about this directive is that it inherits the scope from the view by default. If the controller shown earlier (CustomersController) is bound to the view then the <strong style="box-sizing: border-box;">$scope’s</strong> <strong style="box-sizing: border-box;">customer</strong> property is accessible to the directive. This is referred to as <strong style="box-sizing: border-box;">shared scope</strong> and works great in situations where you know a lot about the parent scope. In situations where you want to re-use a directive you can’t rely on knowing the properties of the scope though and will likely use something referred to as <strong style="box-sizing: border-box;">isolate scope</strong>. I’ll provide more details on isolate scope in the next post.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<h2 style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 30px; font-weight: 300; line-height: 1.1; margin-bottom: 10.5px; margin-top: 21px; padding-bottom: 10px;">
Directive Properties</h2>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
In the previous <strong style="box-sizing: border-box;">mySharedScope</strong> directive a single property named <strong style="box-sizing: border-box;">template</strong> was defined in the object literal returned from the function. This property is responsible for defining the template code (a data binding expression in this case) that should be used to generate HTML. What other properties are available to use?</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
Custom directives will typically return an object literal that is responsible for defining properties needed by the directive such as templates, a controller (if one is used), DOM manipulation code, and more. Several different properties can be used (you’ll find a <a href="http://docs.angularjs.org/api/ng/service/$compile" style="background: transparent; box-sizing: border-box; color: #007fff; text-decoration: none;" target="_blank">complete list of them here</a>). Here’s a look at a few of the key properties that you may come across and an example of using them:</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<pre class="csharpcode" style="background-color: white; border-radius: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; font-family: consolas, "Courier New", courier, monospace; font-size: small; line-height: 1.42857; margin-bottom: 10.5px; overflow: auto; padding: 10px; word-break: break-all; word-wrap: break-word;">angular.module(<span class="str" style="box-sizing: border-box; color: #006080;">'moduleName'</span>)
    .directive(<span class="str" style="box-sizing: border-box; color: #006080;">'myDirective'</span>, <span class="kwrd" style="box-sizing: border-box; color: blue;">function</span> () {
    <span class="kwrd" style="box-sizing: border-box; color: blue;">return</span> {
        restrict: <span class="str" style="box-sizing: border-box; color: #006080;">'EA'</span>, <span class="rem" style="box-sizing: border-box; color: green;">//E = element, A = attribute, C = class, M = comment         </span>
        scope: {
            <span class="rem" style="box-sizing: border-box; color: green;">//@ reads the attribute value, = provides two-way binding, & works with functions</span>
            title: <span class="str" style="box-sizing: border-box; color: #006080;">'@'</span>         },
        template: <span class="str" style="box-sizing: border-box; color: #006080;">'<div>{{ myVal }}</div>'</span>,
        templateUrl: <span class="str" style="box-sizing: border-box; color: #006080;">'mytemplate.html'</span>,
        controller: controllerFunction, <span class="rem" style="box-sizing: border-box; color: green;">//Embed a custom controller in the directive</span>
        link: <span class="kwrd" style="box-sizing: border-box; color: blue;">function</span> ($scope, element, attrs) { } <span class="rem" style="box-sizing: border-box; color: green;">//DOM manipulation</span>
    }
});</pre>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
A short explanation of each of the properties is shown next:</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
</div>
<table border="1" cellpadding="2" cellspacing="0" style="background-color: white; border-collapse: collapse; border-spacing: 0px; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; max-width: 100%; width: 500px;"><tbody style="box-sizing: border-box;">
<tr style="box-sizing: border-box;"><td style="box-sizing: border-box; padding: 0px;" valign="top" width="128"><strong style="box-sizing: border-box;">Property</strong></td><td style="box-sizing: border-box; padding: 0px;" valign="top" width="372"><strong style="box-sizing: border-box;">Description</strong></td></tr>
<tr style="box-sizing: border-box;"><td style="box-sizing: border-box; padding: 0px;" valign="top" width="128">restrict</td><td style="box-sizing: border-box; padding: 0px;" valign="top" width="372">Determines where a directive can be used (as an element, attribute, CSS class, or comment).</td></tr>
<tr style="box-sizing: border-box;"><td style="box-sizing: border-box; padding: 0px;" valign="top" width="128">scope</td><td style="box-sizing: border-box; padding: 0px;" valign="top" width="372">Used to create a new child scope or an isolate scope.</td></tr>
<tr style="box-sizing: border-box;"><td style="box-sizing: border-box; padding: 0px;" valign="top" width="128">template</td><td style="box-sizing: border-box; padding: 0px;" valign="top" width="372">Defines the content that should be output from the directive. Can include HTML, data binding expressions, and even other directives.</td></tr>
<tr style="box-sizing: border-box;"><td style="box-sizing: border-box; padding: 0px;" valign="top" width="128">templateUrl</td><td style="box-sizing: border-box; padding: 0px;" valign="top" width="372">Provides the path to the template that should be used by the directive. It can optionally contain a DOM element id when templates are defined in <script> tags.</td></tr>
<tr style="box-sizing: border-box;"><td style="box-sizing: border-box; padding: 0px;" valign="top" width="128">controller</td><td style="box-sizing: border-box; padding: 0px;" valign="top" width="372">Used to define the controller that will be associated with the directive template.</td></tr>
<tr style="box-sizing: border-box;"><td style="box-sizing: border-box; padding: 0px;" valign="top" width="128">link</td><td style="box-sizing: border-box; padding: 0px;" valign="top" width="372">Function used for DOM manipulation tasks.</td></tr>
</tbody></table>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<h2 style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 30px; font-weight: 300; line-height: 1.1; margin-bottom: 10.5px; margin-top: 21px; padding-bottom: 10px;">
Manipulating the DOM</h2>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
In addition to performing data binding operations with templates (and there’s much more to that story that I’ll cover in future posts!), directives can also be used to manipulate the DOM. This is done using the link function shown earlier.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
The link function normally accepts 3 parameters (although others can be passed in some situations) including the scope, the element that the directive is associated with, and the attributes of the target element. An example of a directive that handles click, mouseenter, and mouseleave events on an element is shown next:</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<pre class="csharpcode" style="background-color: white; border-radius: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; font-family: consolas, "Courier New", courier, monospace; font-size: small; line-height: 1.42857; margin-bottom: 10.5px; overflow: auto; padding: 10px; word-break: break-all; word-wrap: break-word;">app.directive(<span class="str" style="box-sizing: border-box; color: #006080;">'myDomDirective'</span>, <span class="kwrd" style="box-sizing: border-box; color: blue;">function</span> () {
    <span class="kwrd" style="box-sizing: border-box; color: blue;">return</span> {
        link: <span class="kwrd" style="box-sizing: border-box; color: blue;">function</span> ($scope, element, attrs) {
            element.bind(<span class="str" style="box-sizing: border-box; color: #006080;">'click'</span>, <span class="kwrd" style="box-sizing: border-box; color: blue;">function</span> () {
                element.html(<span class="str" style="box-sizing: border-box; color: #006080;">'You clicked me!'</span>);
            });
            element.bind(<span class="str" style="box-sizing: border-box; color: #006080;">'mouseenter'</span>, <span class="kwrd" style="box-sizing: border-box; color: blue;">function</span> () {
                element.css(<span class="str" style="box-sizing: border-box; color: #006080;">'background-color'</span>, <span class="str" style="box-sizing: border-box; color: #006080;">'yellow'</span>);
            });
            element.bind(<span class="str" style="box-sizing: border-box; color: #006080;">'mouseleave'</span>, <span class="kwrd" style="box-sizing: border-box; color: blue;">function</span> () {
                element.css(<span class="str" style="box-sizing: border-box; color: #006080;">'background-color'</span>, <span class="str" style="box-sizing: border-box; color: #006080;">'white'</span>);
            });
        }
    };
});</pre>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
To use the directive you can add the following code into the view:</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<pre class="csharpcode" style="background-color: white; border-radius: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; font-family: consolas, "Courier New", courier, monospace; font-size: small; line-height: 1.42857; margin-bottom: 10.5px; overflow: auto; padding: 10px; word-break: break-all; word-wrap: break-word;"><span class="kwrd" style="box-sizing: border-box; color: blue;"><</span><span class="html" style="box-sizing: border-box; color: maroon;">div</span> <span class="attr" style="box-sizing: border-box; color: red;">my-dom-directive</span><span class="kwrd" style="box-sizing: border-box; color: blue;">></span>Click Me!<span class="kwrd" style="box-sizing: border-box; color: blue;"></</span><span class="html" style="box-sizing: border-box; color: maroon;">div</span><span class="kwrd" style="box-sizing: border-box; color: blue;">></span></pre>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br style="box-sizing: border-box;" />As the mouse enters or leaves the <div> the background color will change between yellow and white (yes, embedded styles are used in this simple example but CSS classes can certainly be used as well). When the target element is clicked the inner HTML is changed to “You clicked me!”. There’s of course much, much more you can do when it comes to DOM manipulating but this should help get you started.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<h2 style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 30px; font-weight: 300; line-height: 1.1; margin-bottom: 10.5px; margin-top: 21px; padding-bottom: 10px;">
Structuring AngularJS Directive Code</h2>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
Although the <strong style="box-sizing: border-box;">mySharedScope</strong> and <strong style="box-sizing: border-box;">myDomDirective</strong> directives work fine, I like to follow a specific pattern when defining directives and other AngularJS components. Here’s an example:</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<pre class="csharpcode" style="background-color: white; border-radius: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; font-family: consolas, "Courier New", courier, monospace; font-size: small; line-height: 1.42857; margin-bottom: 10.5px; overflow: auto; padding: 10px; word-break: break-all; word-wrap: break-word;">(<span class="kwrd" style="box-sizing: border-box; color: blue;">function</span> () {

<span class="kwrd" style="box-sizing: border-box; color: blue;">var</span> directive = <span class="kwrd" style="box-sizing: border-box; color: blue;">function</span> () {
        <span class="kwrd" style="box-sizing: border-box; color: blue;">return</span> {

};
    };

angular.module(<span class="str" style="box-sizing: border-box; color: #006080;">'moduleName'</span>)
        .directive(<span class="str" style="box-sizing: border-box; color: #006080;">'directiveName'</span>, directive);

}());</pre>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
This code wraps everything with an immediately invoked function to pull everything out of the global scope. It then defines the directive functionality in a function assigned to the <strong style="box-sizing: border-box;">directive</strong> variable. Finally, a call is made to the module’s <strong style="box-sizing: border-box;">directive()</strong> function and the <strong style="box-sizing: border-box;">directive</strong> variable is passed in. There are several other techniques that can be used to structure code (see   <a href="http://weblogs.asp.net/dwahlin/archive/2013/12/01/structuring-angularjs-code.aspx" style="background: transparent; box-sizing: border-box; color: #007fff; text-decoration: none;" target="_blank">previous post</a> on the subject) but this is the general pattern I like to follow.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
<br /></div>
<h2 style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 30px; font-weight: 300; line-height: 1.1; margin-bottom: 10.5px; margin-top: 21px; padding-bottom: 10px;">
Summary</h2>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Open Sans", Calibri, Candara, Arial, sans-serif; font-size: 16px; line-height: 28.8px; margin-bottom: 10.5px;">
In this first post on AngularJS directives you’ve seen some of the fundamentals and learned how to create two basic directives. We’ve barely scratched the surface though! In the next post I’ll discuss isolate scope and different properties referred to as <strong style="box-sizing: border-box;">local scope properties</strong> that can be used for data binding and much more.</div>
<br /></div>

Creating Custom AngularJS Directives Series

Creating Custom AngularJS Directives Series The Fundamentals Isolate Scope Isolate Scope and Function Parameters Transclusion and Res...

+ Read more »

jQuery Range Slider

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="post-27770 post type-post status-publish format-standard has-post-thumbnail hentry category-java-script category-jquery-plugins tag-jquery-range-slider" id="post-27770" style="background-attachment: initial; background-clip: initial; background-image: url("http://jrain.oscitas.netdna-cdn.com/wp-content/themes/zillapress/images/separator.png"); background-origin: initial; background-position: center bottom; background-repeat: repeat-x; background-size: initial; border: 0px; color: #333333; font-family: Arial, sans-serif; font-size: 12px; line-height: 20px; margin: 0px 0px 30px; outline: 0px; padding: 0px 0px 10px; vertical-align: baseline;">
<h2 class="entry-title" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; clear: both; color: #7a4b94; font-family: "Myriad Pro", Arial, sans-serif; font-size: 26px; letter-spacing: -1px; line-height: 32px; margin: 0px 0px 3px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://www.jqueryrain.com/2016/05/rangetouch-range-slider-touch-devices/" rel="bookmark" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; color: #7a4b94; margin: 0px 0px 3px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="RangeTouch : Range Slider for Touch Devices">RangeTouch : Range Slider for Touch Devices</a></h2>
<div class="entry-meta entry-header" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #aaaaaa; font-size: 11px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span class="published" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">May 23, 2016</span> <span class="meta-sep" style="border: 0px; color: #d2d2d2; margin: 0px; outline: 0px; padding: 0px 1px; vertical-align: baseline;">| </span><span class="entry-categories" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><a href="http://www.jqueryrain.com/example/java-script/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Core Java Script</a>, <a href="http://www.jqueryrain.com/example/jquery-plugins/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Plugins</a></span></div>
<div class="post-thumb" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; float: left; margin: 0px 15px 20px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://www.jqueryrain.com/2016/05/rangetouch-range-slider-touch-devices/" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-left-style: none !important; border-right-style: none !important; border-top-style: none !important; color: #3399cc; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank" title="RangeTouch : Range Slider for Touch Devices"><img alt="RangeTouch : Range Slider for Touch Devices" class="attachment-thumbnail-lead size-thumbnail-lead wp-post-image" height="100" src="http://jrain.oscitas.netdna-cdn.com/wp-content/uploads/2016/05/javascript-rangetouch.png" style="background: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); box-shadow: rgba(153, 153, 153, 0.247059) 0px 0px 3px; margin: 0px; outline: 0px; padding: 4px; transition: background 1s; vertical-align: baseline;" width="100" /></a></div>
<div class="entry-content" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #474747; float: left; height: auto !important; margin: 0px; min-height: 115px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline; width: 410px;">
<div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
A super tiny library to make <code style="background: rgb(248, 248, 248); border: 0px; font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace; font-stretch: normal; line-height: 18px; margin: 0px; outline: 0px; padding: 3px; vertical-align: baseline;"><input type="range"></code> sliders work better on touch devices.</div>
<ul style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px 0px 20px 30px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">No setup required, just include the script</li>
<li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Less than 1KB minified and gzipped</li>
<li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">No dependencies (written in “vanilla” JavaScript)</li>
</ul>
<div class="extlink clearfix" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 10px 0px 20px; outline: 0px; padding: 2px 0px; vertical-align: baseline;">
<a href="https://github.com/Selz/rangetouch" rel="nofollow" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Read More</a><a class="no-ajaxy" href="http://www.jqueryrain.com/?https://rangetouch.com/" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Demo</a></div>
</div>
<div class="clear" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; clear: both; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
</div>
</div>
<div class="post-26799 post type-post status-publish format-standard has-post-thumbnail hentry category-jquery-plugins tag-jquery-date-time-picker tag-jquery-range-slider" id="post-26799" style="background-attachment: initial; background-clip: initial; background-image: url("http://jrain.oscitas.netdna-cdn.com/wp-content/themes/zillapress/images/separator.png"); background-origin: initial; background-position: center bottom; background-repeat: repeat-x; background-size: initial; border: 0px; color: #333333; font-family: Arial, sans-serif; font-size: 12px; line-height: 20px; margin: 0px 0px 30px; outline: 0px; padding: 0px 0px 10px; vertical-align: baseline;">
<h2 class="entry-title" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; clear: both; color: #7a4b94; font-family: "Myriad Pro", Arial, sans-serif; font-size: 26px; letter-spacing: -1px; line-height: 32px; margin: 0px 0px 3px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://www.jqueryrain.com/2016/03/jquery-range-picker/" rel="bookmark" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; color: #7a4b94; margin: 0px 0px 3px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="jQuery Range Picker">jQuery Range Picker</a></h2>
<div class="entry-meta entry-header" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #aaaaaa; font-size: 11px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span class="published" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">March 24, 2016</span> <span class="meta-sep" style="border: 0px; color: #d2d2d2; margin: 0px; outline: 0px; padding: 0px 1px; vertical-align: baseline;">| </span><span class="entry-categories" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><a href="http://www.jqueryrain.com/example/jquery-plugins/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Plugins</a></span></div>
<div class="post-thumb" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; float: left; margin: 0px 15px 20px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://www.jqueryrain.com/2016/03/jquery-range-picker/" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-left-style: none !important; border-right-style: none !important; border-top-style: none !important; color: #3399cc; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank" title="jQuery Range Picker"><img alt="jQuery Range Picker" class="attachment-thumbnail-lead size-thumbnail-lead wp-post-image" height="100" src="http://jrain.oscitas.netdna-cdn.com/wp-content/uploads/2016/03/jquery-range-picker.png" style="background: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); box-shadow: rgba(153, 153, 153, 0.247059) 0px 0px 3px; margin: 0px; outline: 0px; padding: 4px; transition: background 1s; vertical-align: baseline;" width="100" /></a></div>
<div class="entry-content" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #474747; float: left; height: auto !important; margin: 0px; min-height: 115px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline; width: 410px;">
<div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
jQuery range picker let you set a range between two numbers (positive or negative) or even dates and catch a value by dragging a cursor.</div>
<div class="extlink clearfix" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 10px 0px 20px; outline: 0px; padding: 2px 0px; vertical-align: baseline;">
<a href="https://github.com/zhangtasdq/range-picker" rel="nofollow" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Read More</a><a class="no-ajaxy" href="http://www.jqueryrain.com/?https://jsfiddle.net/cqmyg/me1dmz9e/6/" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Demo</a></div>
</div>
<div class="clear" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; clear: both; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
</div>
</div>
<div class="post-26687 post type-post status-publish format-standard has-post-thumbnail hentry category-jquery-php category-jquery-plugins tag-jquery-range-slider" id="post-26687" style="background-attachment: initial; background-clip: initial; background-image: url("http://jrain.oscitas.netdna-cdn.com/wp-content/themes/zillapress/images/separator.png"); background-origin: initial; background-position: center bottom; background-repeat: repeat-x; background-size: initial; border: 0px; color: #333333; font-family: Arial, sans-serif; font-size: 12px; line-height: 20px; margin: 0px 0px 30px; outline: 0px; padding: 0px 0px 10px; vertical-align: baseline;">
<h2 class="entry-title" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; clear: both; color: #7a4b94; font-family: "Myriad Pro", Arial, sans-serif; font-size: 26px; letter-spacing: -1px; line-height: 32px; margin: 0px 0px 3px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://www.jqueryrain.com/2016/03/price-range-slider-using-jquery-php/" rel="bookmark" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; color: #7a4b94; margin: 0px 0px 3px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="Price Range Slider Using jQuery & PHP">Price Range Slider Using jQuery & PHP</a></h2>
<div class="entry-meta entry-header" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #aaaaaa; font-size: 11px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span class="published" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">March 17, 2016</span> <span class="meta-sep" style="border: 0px; color: #d2d2d2; margin: 0px; outline: 0px; padding: 0px 1px; vertical-align: baseline;">| </span><span class="entry-categories" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><a href="http://www.jqueryrain.com/example/jquery-php/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">PHP</a>, <a href="http://www.jqueryrain.com/example/jquery-plugins/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Plugins</a></span></div>
<div class="post-thumb" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; float: left; margin: 0px 15px 20px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://www.jqueryrain.com/2016/03/price-range-slider-using-jquery-php/" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-left-style: none !important; border-right-style: none !important; border-top-style: none !important; color: #3399cc; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank" title="Price Range Slider Using jQuery & PHP"><img alt="Price Range Slider Using jQuery & PHP" class="attachment-thumbnail-lead size-thumbnail-lead wp-post-image" height="100" src="http://jrain.oscitas.netdna-cdn.com/wp-content/uploads/2016/03/jquery-price-range-slider.png" style="background: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); box-shadow: rgba(153, 153, 153, 0.247059) 0px 0px 3px; margin: 0px; outline: 0px; padding: 4px; transition: background 1s; vertical-align: baseline;" width="100" /></a></div>
<div class="entry-content" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #474747; float: left; height: auto !important; margin: 0px; min-height: 115px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline; width: 410px;">
<div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
Price Range slider is a slider having price on it means instead of entering the price user can also slide the meter to the appropriate price range and submit the price.Price Range Slider is very common in modern websites they are mainly used in eCommerce websites to give easy user experience.In this tutorial we will create a Price Range Slider Using jQuery,CSS and PHP.</div>
<div class="extlink clearfix" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 10px 0px 20px; outline: 0px; padding: 2px 0px; vertical-align: baseline;">
<a href="http://talkerscode.com/webtricks/price-range-slider-using-jquery-css-and-php.php" rel="nofollow" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Read More</a><a class="no-ajaxy" href="http://www.jqueryrain.com/?http://talkerscode.com/webtricks/demo/demo_price-range-slider-using-jquery-css-and-php.php" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Demo</a></div>
</div>
<div class="clear" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; clear: both; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
</div>
</div>
<div class="post-25896 post type-post status-publish format-standard has-post-thumbnail hentry category-jquery-plugins tag-jquery-range-slider" id="post-25896" style="background-attachment: initial; background-clip: initial; background-image: url("http://jrain.oscitas.netdna-cdn.com/wp-content/themes/zillapress/images/separator.png"); background-origin: initial; background-position: center bottom; background-repeat: repeat-x; background-size: initial; border: 0px; color: #333333; font-family: Arial, sans-serif; font-size: 12px; line-height: 20px; margin: 0px 0px 30px; outline: 0px; padding: 0px 0px 10px; vertical-align: baseline;">
<h2 class="entry-title" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; clear: both; color: #7a4b94; font-family: "Myriad Pro", Arial, sans-serif; font-size: 26px; letter-spacing: -1px; line-height: 32px; margin: 0px 0px 3px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://www.jqueryrain.com/2016/01/rangeslider-javascript-polyfill-for-html5-range-slider-element/" rel="bookmark" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; color: #7a4b94; margin: 0px 0px 3px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="rangeSlider : JavaScript polyfill for HTML5 Range Slider Element">rangeSlider : JavaScript polyfill for HTML5 Range Slider Element</a></h2>
<div class="entry-meta entry-header" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #aaaaaa; font-size: 11px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span class="published" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">January 30, 2016</span> <span class="meta-sep" style="border: 0px; color: #d2d2d2; margin: 0px; outline: 0px; padding: 0px 1px; vertical-align: baseline;">| </span><span class="entry-categories" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><a href="http://www.jqueryrain.com/example/jquery-plugins/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Plugins</a></span></div>
<div class="post-thumb" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; float: left; margin: 0px 15px 20px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://www.jqueryrain.com/2016/01/rangeslider-javascript-polyfill-for-html5-range-slider-element/" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-left-style: none !important; border-right-style: none !important; border-top-style: none !important; color: #3399cc; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank" title="rangeSlider : JavaScript polyfill for HTML5 Range Slider Element"><img alt="rangeSlider : JavaScript polyfill for HTML5 Range Slider Element" class="attachment-thumbnail-lead size-thumbnail-lead wp-post-image" height="100" src="http://jrain.oscitas.netdna-cdn.com/wp-content/uploads/2016/01/jquery-range-slider.jpg" style="background: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); box-shadow: rgba(153, 153, 153, 0.247059) 0px 0px 3px; margin: 0px; outline: 0px; padding: 4px; transition: background 1s; vertical-align: baseline;" width="100" /></a></div>
<div class="entry-content" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #474747; float: left; height: auto !important; margin: 0px; min-height: 115px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline; width: 410px;">
<div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span class="repository-meta-content" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Simple, small and fast vanilla JavaScript polyfill for the HTML5 `<input type=”range”>` slider element.</span></div>
<ul style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px 0px 20px 30px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Touchscreen friendly</li>
<li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Recalculates <code style="background: rgb(248, 248, 248); border: 0px; font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace; font-stretch: normal; line-height: 18px; margin: 0px; outline: 0px; padding: 3px; vertical-align: baseline;">onresize</code> so suitable for use within responsive designs</li>
<li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Small and fast</li>
<li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Supports all major browsers</li>
<li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Buffer progressbar (for downloading progress etc.)</li>
</ul>
<div class="extlink clearfix" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 10px 0px 20px; outline: 0px; padding: 2px 0px; vertical-align: baseline;">
<a href="https://github.com/Stryzhevskyi/rangeSlider" rel="nofollow" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Read More</a><a class="no-ajaxy" href="http://www.jqueryrain.com/?http://stryzhevskyi.github.io/rangeSlider/" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Demo</a></div>
</div>
<div class="clear" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; clear: both; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
</div>
</div>
<div class="post-25747 post type-post status-publish format-standard has-post-thumbnail hentry category-bootstrap category-jquery-plugins tag-jquery-range-slider" id="post-25747" style="background-attachment: initial; background-clip: initial; background-image: url("http://jrain.oscitas.netdna-cdn.com/wp-content/themes/zillapress/images/separator.png"); background-origin: initial; background-position: center bottom; background-repeat: repeat-x; background-size: initial; border: 0px; color: #333333; font-family: Arial, sans-serif; font-size: 12px; line-height: 20px; margin: 0px 0px 30px; outline: 0px; padding: 0px 0px 10px; vertical-align: baseline;">
<h2 class="entry-title" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; clear: both; color: #7a4b94; font-family: "Myriad Pro", Arial, sans-serif; font-size: 26px; letter-spacing: -1px; line-height: 32px; margin: 0px 0px 3px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://www.jqueryrain.com/2016/01/bootstrap-slider-jquery-bootstrap-range-slider/" rel="bookmark" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; color: #7a4b94; margin: 0px 0px 3px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="Bootstrap-Slider : jQuery Bootstrap Range Slider">Bootstrap-Slider : jQuery Bootstrap Range Slider</a></h2>
<div class="entry-meta entry-header" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #aaaaaa; font-size: 11px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span class="published" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">January 24, 2016</span> <span class="meta-sep" style="border: 0px; color: #d2d2d2; margin: 0px; outline: 0px; padding: 0px 1px; vertical-align: baseline;">| </span><span class="entry-categories" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><a href="http://www.jqueryrain.com/example/bootstrap/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Bootstrap</a>, <a href="http://www.jqueryrain.com/example/jquery-plugins/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Plugins</a></span></div>
<div class="post-thumb" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; float: left; margin: 0px 15px 20px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://www.jqueryrain.com/2016/01/bootstrap-slider-jquery-bootstrap-range-slider/" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-left-style: none !important; border-right-style: none !important; border-top-style: none !important; color: #3399cc; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank" title="Bootstrap-Slider : jQuery Bootstrap Range Slider"><img alt="Bootstrap-Slider : jQuery Bootstrap Range Slider" class="attachment-thumbnail-lead size-thumbnail-lead wp-post-image" height="100" src="http://jrain.oscitas.netdna-cdn.com/wp-content/uploads/2016/01/jquery-bootstrap-slider.png" style="background: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); box-shadow: rgba(153, 153, 153, 0.247059) 0px 0px 3px; margin: 0px; outline: 0px; padding: 4px; transition: background 1s; vertical-align: baseline;" width="100" /></a></div>
<div class="entry-content" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #474747; float: left; height: auto !important; margin: 0px; min-height: 115px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline; width: 410px;">
<div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span class="repository-meta-content" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">A complete rewrite of the original bootstrap-slider by Stefan Petre</span></div>
<div class="extlink clearfix" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 10px 0px 20px; outline: 0px; padding: 2px 0px; vertical-align: baseline;">
<a href="https://github.com/seiyria/bootstrap-slider" rel="nofollow" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Read More</a><a class="no-ajaxy" href="http://www.jqueryrain.com/?http://seiyria.com/bootstrap-slider/" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Demo</a></div>
</div>
<div class="clear" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; clear: both; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
</div>
</div>
<div class="post-25144 post type-post status-publish format-standard has-post-thumbnail hentry category-bootstrap category-html5-jquery-tutorial category-jquery-json category-jquery-plugins tag-jquery-range-slider" id="post-25144" style="background-attachment: initial; background-clip: initial; background-image: url("http://jrain.oscitas.netdna-cdn.com/wp-content/themes/zillapress/images/separator.png"); background-origin: initial; background-position: center bottom; background-repeat: repeat-x; background-size: initial; border: 0px; color: #333333; font-family: Arial, sans-serif; font-size: 12px; line-height: 20px; margin: 0px 0px 30px; outline: 0px; padding: 0px 0px 10px; vertical-align: baseline;">
<h2 class="entry-title" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; clear: both; color: #7a4b94; font-family: "Myriad Pro", Arial, sans-serif; font-size: 26px; letter-spacing: -1px; line-height: 32px; margin: 0px 0px 3px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://www.jqueryrain.com/2015/12/pro-range-data-slider-jquery-plugin/" rel="bookmark" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; color: #7a4b94; margin: 0px 0px 3px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="Pro Range Data Slider : jQuery Plugin">Pro Range Data Slider : jQuery Plugin</a></h2>
<div class="entry-meta entry-header" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #aaaaaa; font-size: 11px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span class="published" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">December 14, 2015</span> <span class="meta-sep" style="border: 0px; color: #d2d2d2; margin: 0px; outline: 0px; padding: 0px 1px; vertical-align: baseline;">| </span><span class="entry-categories" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><a href="http://www.jqueryrain.com/example/bootstrap/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Bootstrap</a>, <a href="http://www.jqueryrain.com/example/html5-jquery-tutorial/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">HTML5</a>, <a href="http://www.jqueryrain.com/example/jquery-json/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">jSON</a>, <a href="http://www.jqueryrain.com/example/jquery-plugins/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Plugins</a></span></div>
<div class="post-thumb" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; float: left; margin: 0px 15px 20px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://www.jqueryrain.com/2015/12/pro-range-data-slider-jquery-plugin/" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-left-style: none !important; border-right-style: none !important; border-top-style: none !important; color: #3399cc; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank" title="Pro Range Data Slider : jQuery Plugin"><img alt="Pro Range Data Slider : jQuery Plugin" class="attachment-thumbnail-lead size-thumbnail-lead wp-post-image" height="100" src="http://jrain.oscitas.netdna-cdn.com/wp-content/uploads/2015/12/jquery-html5-ProRangeSlider.png" style="background: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); box-shadow: rgba(153, 153, 153, 0.247059) 0px 0px 3px; margin: 0px; outline: 0px; padding: 4px; transition: background 1s; vertical-align: baseline;" width="100" /></a></div>
<div class="entry-content" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #474747; float: left; height: auto !important; margin: 0px; min-height: 115px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline; width: 410px;">
<div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span class="repository-meta-content" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Lightweight HTML5 based range data slider for mobile and desktop that creates data objects from user input and formats as JSON for modern web app’s</span>.A substantial improvement over the data range sliders in jQueryUI and Twitter Bootstrap.</div>
<ul style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px 0px 20px 30px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">HTML5 ready. Use the new elements with confidence</li>
<li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">A touch friendly data range slider</li>
<li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">No code bloat</li>
<li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Formats input to JSON</li>
<li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Tallys amounts from each range slider to provide a total</li>
<li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Can be re-styled any way you like in CSS</li>
</ul>
<div class="extlink clearfix" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 10px 0px 20px; outline: 0px; padding: 2px 0px; vertical-align: baseline;">
<a href="https://github.com/joehoeller/ProRangeSlider" rel="nofollow" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Read More</a><a class="no-ajaxy" href="http://www.jqueryrain.com/?http://jsfiddle.net/JOEHOELLER/217m94fk/2/" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Demo</a></div>
</div>
<div class="clear" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; clear: both; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
</div>
</div>
<div class="post-23006 post type-post status-publish format-standard has-post-thumbnail hentry category-jquery-css category-jquery-ui tag-jquery-range-slider" id="post-23006" style="background-attachment: initial; background-clip: initial; background-image: url("http://jrain.oscitas.netdna-cdn.com/wp-content/themes/zillapress/images/separator.png"); background-origin: initial; background-position: center bottom; background-repeat: repeat-x; background-size: initial; border: 0px; color: #333333; font-family: Arial, sans-serif; font-size: 12px; line-height: 20px; margin: 0px 0px 30px; outline: 0px; padding: 0px 0px 10px; vertical-align: baseline;">
<h2 class="entry-title" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; clear: both; color: #7a4b94; font-family: "Myriad Pro", Arial, sans-serif; font-size: 26px; letter-spacing: -1px; line-height: 32px; margin: 0px 0px 3px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://www.jqueryrain.com/2015/07/flat-slider-visual-styler-for-jquery-ui-slider/" rel="bookmark" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; color: #7a4b94; margin: 0px 0px 3px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="Flat slider : Visual styler for jQuery UI slider">Flat slider : Visual styler for jQuery UI slider</a></h2>
<div class="entry-meta entry-header" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #aaaaaa; font-size: 11px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span class="published" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">July 8, 2015</span> <span class="meta-sep" style="border: 0px; color: #d2d2d2; margin: 0px; outline: 0px; padding: 0px 1px; vertical-align: baseline;">| </span><span class="entry-categories" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><a href="http://www.jqueryrain.com/example/jquery-css/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">CSS2 / CSS3.0</a>, <a href="http://www.jqueryrain.com/example/jquery-ui/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">jQuery UI</a></span></div>
<div class="post-thumb" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; float: left; margin: 0px 15px 20px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://www.jqueryrain.com/2015/07/flat-slider-visual-styler-for-jquery-ui-slider/" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-left-style: none !important; border-right-style: none !important; border-top-style: none !important; color: #3399cc; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank" title="Flat slider : Visual styler for jQuery UI slider"><img alt="Flat slider : Visual styler for jQuery UI slider" class="attachment-thumbnail-lead size-thumbnail-lead wp-post-image" height="100" src="http://jrain.oscitas.netdna-cdn.com/wp-content/uploads/2015/07/jquery-ui-slider-styler.png" style="background: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); box-shadow: rgba(153, 153, 153, 0.247059) 0px 0px 3px; margin: 0px; outline: 0px; padding: 4px; transition: background 1s; vertical-align: baseline;" width="100" /></a></div>
<div class="entry-content" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #474747; float: left; height: auto !important; margin: 0px; min-height: 115px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline; width: 410px;">
<div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
Flat slider is an online tool that allows you to turn the jQuery UI slider into a beautiful flat slider. You can change the color and size of the slider line, handles and range. The tool generates the CSS as you make your changes, so that you can easily copy and paste it into your website stylesheets.</div>
<div class="extlink clearfix" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 10px 0px 20px; outline: 0px; padding: 2px 0px; vertical-align: baseline;">
<a href="http://lugolabs.com/flat-slider" rel="nofollow" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Read More</a><a class="no-ajaxy" href="http://www.jqueryrain.com/?http://lugolabs.com/flat-slider" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Demo</a></div>
</div>
<div class="clear" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; clear: both; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
</div>
</div>
<div class="post-22613 post type-post status-publish format-standard has-post-thumbnail hentry category-jquery-plugins tag-jquery-range-slider" id="post-22613" style="background-attachment: initial; background-clip: initial; background-image: url("http://jrain.oscitas.netdna-cdn.com/wp-content/themes/zillapress/images/separator.png"); background-origin: initial; background-position: center bottom; background-repeat: repeat-x; background-size: initial; border: 0px; color: #333333; font-family: Arial, sans-serif; font-size: 12px; line-height: 20px; margin: 0px 0px 30px; outline: 0px; padding: 0px 0px 10px; vertical-align: baseline;">
<h2 class="entry-title" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; clear: both; color: #7a4b94; font-family: "Myriad Pro", Arial, sans-serif; font-size: 26px; letter-spacing: -1px; line-height: 32px; margin: 0px 0px 3px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://www.jqueryrain.com/2015/06/roundslider-jquery-circular-range-slider/" rel="bookmark" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; color: #7a4b94; margin: 0px 0px 3px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="roundSlider : jQuery Circular Range Slider">roundSlider : jQuery Circular Range Slider</a></h2>
<div class="entry-meta entry-header" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #aaaaaa; font-size: 11px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span class="published" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">June 22, 2015</span> <span class="meta-sep" style="border: 0px; color: #d2d2d2; margin: 0px; outline: 0px; padding: 0px 1px; vertical-align: baseline;">| </span><span class="entry-categories" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><a href="http://www.jqueryrain.com/example/jquery-plugins/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Plugins</a></span></div>
<div class="post-thumb" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; float: left; margin: 0px 15px 20px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://www.jqueryrain.com/2015/06/roundslider-jquery-circular-range-slider/" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-left-style: none !important; border-right-style: none !important; border-top-style: none !important; color: #3399cc; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank" title="roundSlider : jQuery Circular Range Slider"><img alt="roundSlider : jQuery Circular Range Slider" class="attachment-thumbnail-lead size-thumbnail-lead wp-post-image" height="100" src="http://jrain.oscitas.netdna-cdn.com/wp-content/uploads/2015/06/jquery-roundslider.png" style="background: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); box-shadow: rgba(153, 153, 153, 0.247059) 0px 0px 3px; margin: 0px; outline: 0px; padding: 4px; transition: background 1s; vertical-align: baseline;" width="100" /></a></div>
<div class="entry-content" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #474747; float: left; height: auto !important; margin: 0px; min-height: 115px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline; width: 410px;">
<div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
Round slider (also can call as Circular slider, Radial slider) is a jQuery plugin that allows the user to select a value or range of values.</div>
<div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
Not only a round slider, it supports<strong style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> the quarter, half and pie circle shapes also</strong>.</div>
<div class="extlink clearfix" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 10px 0px 20px; outline: 0px; padding: 2px 0px; vertical-align: baseline;">
<a href="https://github.com/soundar24/roundSlider" rel="nofollow" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Read More</a><a class="no-ajaxy" href="http://www.jqueryrain.com/?http://roundsliderui.com/demos.html" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Demo</a></div>
</div>
<div class="clear" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; clear: both; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
</div>
</div>
<div class="post-21982 post type-post status-publish format-standard has-post-thumbnail hentry category-jquery-plugins tag-jquery-range-slider" id="post-21982" style="background-attachment: initial; background-clip: initial; background-image: url("http://jrain.oscitas.netdna-cdn.com/wp-content/themes/zillapress/images/separator.png"); background-origin: initial; background-position: center bottom; background-repeat: repeat-x; background-size: initial; border: 0px; color: #333333; font-family: Arial, sans-serif; font-size: 12px; line-height: 20px; margin: 0px 0px 30px; outline: 0px; padding: 0px 0px 10px; vertical-align: baseline;">
<h2 class="entry-title" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; clear: both; color: #7a4b94; font-family: "Myriad Pro", Arial, sans-serif; font-size: 26px; letter-spacing: -1px; line-height: 32px; margin: 0px 0px 3px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://www.jqueryrain.com/2015/05/mb-valueslider-jquery-value-slider-plugin/" rel="bookmark" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; color: #7a4b94; margin: 0px 0px 3px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="mb.valueSlider : jQuery Value Slider Plugin">mb.valueSlider : jQuery Value Slider Plugin</a></h2>
<div class="entry-meta entry-header" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #aaaaaa; font-size: 11px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span class="published" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">May 20, 2015</span> <span class="meta-sep" style="border: 0px; color: #d2d2d2; margin: 0px; outline: 0px; padding: 0px 1px; vertical-align: baseline;">| </span><span class="entry-categories" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><a href="http://www.jqueryrain.com/example/jquery-plugins/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Plugins</a></span></div>
<div class="post-thumb" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; float: left; margin: 0px 15px 20px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://www.jqueryrain.com/2015/05/mb-valueslider-jquery-value-slider-plugin/" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-left-style: none !important; border-right-style: none !important; border-top-style: none !important; color: #3399cc; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank" title="mb.valueSlider : jQuery Value Slider Plugin"><img alt="mb.valueSlider : jQuery Value Slider Plugin" class="attachment-thumbnail-lead size-thumbnail-lead wp-post-image" height="100" src="http://jrain.oscitas.netdna-cdn.com/wp-content/uploads/2015/05/jquery-value-slider.png" style="background: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); box-shadow: rgba(153, 153, 153, 0.247059) 0px 0px 3px; margin: 0px; outline: 0px; padding: 4px; transition: background 1s; vertical-align: baseline;" width="100" /></a></div>
<div class="entry-content" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #474747; float: left; height: auto !important; margin: 0px; min-height: 115px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline; width: 410px;">
<div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
jquery.mb.valueSlider let you set a range between two numbers (positive or negative) and catch a value by dragging a cursor.</div>
<div class="extlink clearfix" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 10px 0px 20px; outline: 0px; padding: 2px 0px; vertical-align: baseline;">
<a href="https://github.com/pupunzi/jquery.mb.valueSlider" rel="nofollow" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Read More</a><a class="no-ajaxy" href="http://www.jqueryrain.com/?http://pupunzi.com/mb.components/mb.valueSlider/demo/demo.html" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Demo</a></div>
</div>
<div class="clear" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; clear: both; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
</div>
</div>
<div class="post-22045 post type-post status-publish format-standard has-post-thumbnail hentry category-jquery-plugins tag-jquery-range-slider" id="post-22045" style="background-attachment: initial; background-clip: initial; background-image: url("http://jrain.oscitas.netdna-cdn.com/wp-content/themes/zillapress/images/separator.png"); background-origin: initial; background-position: center bottom; background-repeat: repeat-x; background-size: initial; border: 0px; color: #333333; font-family: Arial, sans-serif; font-size: 12px; line-height: 20px; margin: 0px 0px 30px; outline: 0px; padding: 0px 0px 10px; vertical-align: baseline;">
<h2 class="entry-title" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; clear: both; color: #7a4b94; font-family: "Myriad Pro", Arial, sans-serif; font-size: 26px; letter-spacing: -1px; line-height: 32px; margin: 0px 0px 3px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://www.jqueryrain.com/2015/05/jquery-lcn-circle-range-select/" rel="bookmark" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; color: #7a4b94; margin: 0px 0px 3px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="jQuery Lcn Circle Range Select">jQuery Lcn Circle Range Select</a></h2>
<div class="entry-meta entry-header" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #aaaaaa; font-size: 11px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span class="published" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">May 9, 2015</span> <span class="meta-sep" style="border: 0px; color: #d2d2d2; margin: 0px; outline: 0px; padding: 0px 1px; vertical-align: baseline;">| </span><span class="entry-categories" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><a href="http://www.jqueryrain.com/example/jquery-plugins/" rel="category tag" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #db7030; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Plugins</a></span></div>
<div class="post-thumb" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; float: left; margin: 0px 15px 20px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://www.jqueryrain.com/2015/05/jquery-lcn-circle-range-select/" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-bottom-style: none; border-left-style: none !important; border-right-style: none !important; border-top-style: none !important; color: #3399cc; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank" title="jQuery Lcn Circle Range Select"><img alt="jQuery Lcn Circle Range Select" class="attachment-thumbnail-lead size-thumbnail-lead wp-post-image" height="100" src="http://jrain.oscitas.netdna-cdn.com/wp-content/uploads/2015/05/jquery-circle-range-select.png" style="background: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); box-shadow: rgba(153, 153, 153, 0.247059) 0px 0px 3px; margin: 0px; outline: 0px; padding: 4px; transition: background 1s; vertical-align: baseline;" width="100" /></a></div>
<div class="entry-content" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #474747; float: left; height: auto !important; margin: 0px; min-height: 115px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline; width: 410px;">
<div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
jQuery Lcn is a 360 degree circle range select input widget.</div>
<div class="extlink clearfix" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; margin: 10px 0px 20px; outline: 0px; padding: 2px 0px; vertical-align: baseline;">
<a href="https://github.com/FaiblUG/jQuery-Lcn-Circle-Range-Select" rel="nofollow" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Read More</a><a class="no-ajaxy" href="http://www.jqueryrain.com/?http://cdn.rawgit.com/FaiblUG/jQuery-Lcn-Circle-Range-Select/master/demo.html" style="background: rgb(220, 0, 90); border-bottom-style: none; border-left-color: rgb(220, 0, 90) !important; border-left-style: solid !important; border-left-width: 1px !important; border-radius: 3px; border-right-color: rgb(220, 0, 90) !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: rgb(220, 0, 90) !important; border-top-style: solid !important; border-top-width: 1px !important; color: white; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-stretch: normal; font-weight: bold; line-height: 14.3px; margin: 0px 7px 0px 0px; outline: 0px; padding: 2px 7px; text-decoration: none; vertical-align: baseline;" target="_blank">Demo</a></div>
</div>
</div>
</div>

jQuery Range Slider

RangeTouch : Range Slider for Touch Devices May 23, 2016 | Core Java Script , Plugins A super tiny library to make <input ...

+ Read more »

Subscribe to: Posts ( Atom )