Q:

range slider component in lightning?

Has anyone has implemented range slider in lightning? I am trying to create the same but not able to.
I have one component Homepage.cmp as below
<aura:component access="global" controller="ValueCalculatorController"  implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome">
 <ltng:require styles="/resource/realtyapp/js/jquery.nouislider.min.css"    
              scripts="/resource/realtyapp/js/jquery.js,/resource/realtyapp/js/jquery.nouislider.all.min.js"/>    
   <aura:registerEvent name="rangeSliderEvent" type="c:sliderEvent"/> 
<aura:attribute name="ServDisc" type="String" default=""/>
    <aura:attribute name="service" type="Service__c"/>
    <aura:handler name="init" value="{!this}" action="{!c.myAction}"/>

    <link href="https://code.jquery.com/jquery-3.1.1.js"/>
    <link href="http://www.jqueryscript.net/demo/Simple-Nice-jQuery-Value-Range-Slider-Plugin-Fresh-Slider/freshslider.1.0.js"/>      
    <div class="slds-spinner_container slds-hide" aura:id ="load">
            <div role="status" class="slds-spinner slds-spinner--large">
                <span class="slds-assistive-text">Loading</span>
                <div class="slds-spinner__dot-a"></div>
                <div class="slds-spinner__dot-b"></div>
            </div>
    </div>
    <div>
        <nav class="navbar navbar-default" style="background-color:#019c50;font-family:verdana;">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand"><img style="width: 200px;margin-top: -13px;" 
                                             src="/resource/CastrolLogo" alt="Castrol Logo"></img></a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a style="color:white;" href="#">HOME</a></li>
                        <li><a style="color:white;" href="#" onclick="{!c.toggle}">SERVICES</a></li>
                    </ul>
                </div>
            </div>

        </nav>
        <div class="col-md-3 col-sm-6 hero-feature slds-hide" style="margin-left: -13px;font-family:verdana;" align="center" id="technicalServices">
            <div class="thumbnail">
                <img src="/resource/TechServices" alt="" style="margin-top:10px;"/>
                    <div class="caption" style="margin-top:20px; margin-bottom:20px;">
                        <h4 style="font-family:verdana; color:black;"><a href="#" onclick="{!c.getTechServices}">Technical Services<br/></a></h4>
                        <p style="font-size: 12px;color: black;">{!v.ServDisc}</p>
                    </div>
            </div>
        </div>
        <div class="col-md-9 slds-hide" id="technics">
                <table class="table table-striped" style="border:1px solid grey;font-family:verdana;font-size:13px;">
                        <thead>
                            <th style="padding: 10px;background-color: #019c50;color: white;"><b>Our Technical Services</b></th>    
                            <th style="padding: 10px;background-color: #019c50;"></th>  
                    </thead>
                        <tbody>

                            <aura:iteration items="{!v.service}" var="obj">
                                <tr>
                                    <td style="border-bottom:1px solid grey;">
                                        {!obj.Name}
                                    </td>
                                   <!-- <td style="border-bottom:1px solid grey;" >

                                        <input id="slider" type="range"  min="0" max="100"  step="20" onchange="{!c.sliderOnChange}"></input>
                                        <p><span>0</span>
                                            <span id="rangeValue" style="margin-left:70px;">0</span>
                                            <span style="margin-left: 50px;">10</span>
                                        </p>

                                    </td>   -->
                                    <td style="border-bottom:1px solid grey;">
                                        <c:sliderComponent/>
                                   </td>

                                </tr>     
                            </aura:iteration>
                         </tbody>
                </table>
        </div>
    </div>

</aura:component>

c:sliderComponent is the sliderComponent. 
<aura:component>
    <ltng:require styles="/resource/realtyapp/js/jquery.nouislider.min.css" 
                  scripts="/resource/realtyapp/js/jquery.js,/resource/realtyapp/js/jquery.nouislider.all.min.js"
                afterScriptsLoaded="{!c.sliderInit}"/>
   <!-- <input type="range" min="0" max="100" value="50" />-->
     <div>
        <div id="slider"></div>
    </div>
</aura:component>

sliderController.js
({
    sliderInit : function(component, event, helper) {
        var $slider = $("#slider");
        $slider.noUiSlider({
            start: [300000, 1500000],
            connect: true,
            step: 50000,
            range: {
                'min': 300000,
                'max': 1500000
            }
        });
    }
})

But as I am including this component in Homepage.cmp, everytime its calling sliderInit() function and throwing error as Slider was already initialized. But I  want slider for each row in iteration.

A:

i think you can make following changes in iteration of component 
<aura:iteration items="{!v.service}" var="obj" indexVar="i">
                                <tr>
                                    <td style="border-bottom:1px solid grey;">
                                        {!obj.Name}
                                    </td>
                                   <!-- <td style="border-bottom:1px solid grey;" >

                                        <input id="slider" type="range"  min="0" max="100"  step="20" onchange="{!c.sliderOnChange}"></input>
                                        <p><span>0</span>
                                            <span id="rangeValue" style="margin-left:70px;">0</span>
                                            <span style="margin-left: 50px;">10</span>
                                        </p>

                                    </td>   -->
                                    <td style="border-bottom:1px solid grey;">
                                        <c:sliderComponent num={!i}/>
                                   </td>

                                </tr>     
                            </aura:iteration>

then make changes in slider Component as 
<aura:component>
    <ltng:require styles="/resource/realtyapp/js/jquery.nouislider.min.css" 
                  scripts="/resource/realtyapp/js/jquery.js,/resource/realtyapp/js/jquery.nouislider.all.min.js"
                afterScriptsLoaded="{!c.sliderInit}"/>
<aura:attribute name="num" type="String" />
   <!-- <input type="range" min="0" max="100" value="50" />-->
     <div>
        <div id="{!'slider'+v.num}"></div>
    </div>
</aura:component>

Then changes in js are :-
({
    sliderInit : function(component, event, helper) {
        var num = "#slider"+component.get("v.num");
        var $slider = $(num);
        $slider.noUiSlider({
            start: [300000, 1500000],
            connect: true,
            step: 50000,
            range: {
                'min': 300000,
                'max': 1500000
            }
        });
    }
})

i think you were trying to intialize same Id again and again that might be problem.

