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.
<lightning:input type="range" ... />available - see lightning:input (Beta).