0

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.

1

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.

  • Thnaks Manjit for reply. I am getting error for <div id="slider"+{!v.num}></div> as "Failed to save undefined: markup://c:sliderComponent:12,25: ParseError at [row,col]:[13,25] Message: Element type "div" must be followed by either attribute specifications, ">" or "/>".: Source" . Please suggest. – Sofiya Feb 21 '17 at 4:15
  • I have tried with this also, <div id="{!'slider'+v.num}"></div> but i am getting id as "sliderundefined" – Sofiya Feb 21 '17 at 4:33
  • @sofiya can you tell which changes you made to make it work that will be helpful to other users – Manjot Singh Feb 21 '17 at 6:25
  • Sure manjot. i have used your changes in my code and in slider component i modified code as <div id="{!'slider'+v.num}"></div> and it worked. – Sofiya Feb 21 '17 at 7:32
  • @sofiya thnx . i will edit my answer to make it correct. – Manjot Singh Feb 21 '17 at 7:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.