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
  • Its beta not GA, with there is a <lightning:input type="range" ... /> available - see lightning:input (Beta).
    – Keith C
    Feb 20, 2017 at 11:22

2 Answers 2

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.

5
  • 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, 2017 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, 2017 at 4:33
  • @sofiya can you tell which changes you made to make it work that will be helpful to other users Feb 21, 2017 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, 2017 at 7:32
  • @sofiya thnx . i will edit my answer to make it correct. Feb 21, 2017 at 7:37
0

Lightning Slider is already in place, please check this https://developer.salesforce.com/docs/component-library/bundle/lightning:slider/example#lightningcomponentdemo:exampleSliderBasic

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.