Custom slider component Lightning

Question

Im working on creating a custom slider component in lightning. I don't want to use the one provided as it has quite limited functionality.

I'm seeing the slider on the page, but get the error:

[knob.addEventListener is not a function]

Component:

<!-- Should be auto-set -->
<aura:attribute name="Height" type="Integer"/>
<aura:attribute name="Width" type="Integer"/>

<aura:attribute name="Steps" type="Integer[]" default="[0,10,20,30,40,50,60,70,80,90,100]"/>
<aura:attribute name="stepChange" type="Integer" default="1"/>
<aura:attribute name="Tick" type="Integer" default="0.1"/>

<aura:attribute name="Orientation" type="String" default="Horizontal"/> 

<aura:attribute name="Min" type="Integer" default="0"/>
<aura:attribute name="Max" type="Integer" default="100"/>
<aura:attribute name="Value" type="Integer" default="10"/>

<!-- Handlers  -->
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<div id='track' aura:id="track" class="track">
<div id="knob" aura:id="knob" onmousedown="{!c.onMouseDown}" class="knob"></div>
</div>

css:

   .THIS .track 
{
    width: 200px;
    height: 5px;
    margin:100px; 
    background: red
}
.THIS .knob 
{
    height: 10px; 
    width: 40px; 
    background: black;
    position: relative; 
}

helper.js

({
    initialLoad: function(component, event, helper) {

        var dragging = false;
        var knobOffset = 0;

        var track = component.find("track"),
            knob = component.find("knob"),

            trackWidth = track.offsetWidth,
            trackLeft = track.offsetLeft,
            trackRight = trackLeft + trackWidth,

            knobWidth = knob.offsetWidth,
            maxRight = trackWidth - knobWidth; // relatively to track

        window.addEventListener('mouseup', function(e) {
            dragging = false;
        })

        window.addEventListener('mousemove', function(e) {
            if (dragging) {
                // current knob offset, relative to track
                var offset = e.clientX - trackLeft - knobOffset;
                if (offset < 0) {
                    var offset = 0;
                } else if (offset > maxRight) {
                    var offset = maxRight;
                }

                knob.style.left = offset + "px"
            }
        });
    },

    onMouseDown: function(component, event, helper) {
        console.log(here);
        var knob = component.find("knob");

        knob.addEventListener('mousedown', function(e) {
            // knob offset relatively to track
            knobOffset = e.clientX - knob.offsetLeft;
            dragging = true;
        });
    },
})

controller.js

 ({
        doInit: function(component, event, helper) {
            helper.initialLoad(component, event, helper);
        },
        onMouseDown: function(component,event,helper) {
    console.log("mousedown");
    helper.onMouseDown(component,event,helper);
},
    })

Thanks in advance.

Answer 1

Be it a custom component or an HTML element when you do component.find() we get an intended target's component instance rather than the actual DOM.

In order to access the DOM, you need this:

component.find().getElement(); // return the DOM of a component instance

So your onMouseDown method would look like this:

onMouseDown: function(component, event, helper) {
     var knob = component.find("knob").getElement();

     knob.addEventListener('mousedown', function(e) {
         // knob offset relatively to track
         knobOffset = e.clientX - knob.offsetLeft;
    });
},

Answer 2

To apply the CSS to your elements you would need to define it like this:

.THIS.track 
{...}
.THIS.knob 
{...}

The divs are in the first level of your components, and .THIS (the class name of your Component) is applied to first level elements in your component. In the DOM it will look like this:

<div id="track" class="YourComponent">

Therefore you need to chain the selectors without spaces. .THIS .foo only applies to foo elements within the .THIS component.

Not sure if this fixes your viability issues, but it at least let's you apply your css to your elements.

BTW:

<div id="knob" aura:id="knob" mousedown="{!c.onMouseDown}" class="knob"></div>

should be:

<div id="knob" aura:id="knob" onmousedown="{!c.onMouseDown}" class="knob"></div>