Salesforce Lightning component input slider

<aura:attribute name="slider" default="1" type="Integer"/>
.
.
.
<fieldset class="slds-form-element">
<legend class="slds-form-element__legend slds-form-element__label">Slider</legend>	
<div class="slds-form-element">
  <label class="slds-form-element__label" for="slider-id-01">
	<span class="slds-slider-label">
	  <span class="slds-slider-label__label">Indica il numero di mesi da pianificare:</span>
	  <span class="slds-slider-label__range">1 - 24</span>
	</span>
  </label>
  <div class="slds-form-element__control">
	<div class="slds-slider">
	  <input aura:id="slider" class="slds-slider__range" type="range" min="1" max="24" step="1" value="{!v.slider}" onchange="{!c.getNumMouthPlanner}" />         
	  <span class="slds-slider__value" aria-hidden="true">{!v.slider}</span>
	</div>
  </div>
</div>	
</fieldset>

Controller

getNumMouthPlanner : function(component,event){

sliderValue = component.find("slider").getElement().value;
console.log(component.find("slider").getElement().value);
component.set("v.slider",sliderValue);
}