SVG Slider

A flexible and customizable slider for your web applications.

npm package

https://www.npmjs.com/package/svg-slider

Usage

Check the demo.html file for examples.

.slider {
    width: 100px;
}

<svg class="slider" id="slider"></svg>

Without ES6 module support:

<script src="dist/svg-slider.min.js"></script>
<script>
    var s = new svgSlider('#slider', { /* config... */ });   
</script>

With ES6 module support:

<script type="module">
    import Slider from './index.js';
    const s = new Slider('#slider', { /* config... */ });        
</script>

change the value:

s.value = 42;

listen to the change events:

document.getElementById("slider").addEventListener("change", function(event) {
    let [slider_id, slider_value] = [event.target.id, event.detail];
});    

Usage with React

Quick example for a svg-knob and a linked div displaying the value transmitted through the knob's onChange event.

Simple SliderContainer component (2 files):

components/SliderContainer/index.jsx :

import React, { Component } from 'react';
import SliderComponent from "./SliderComponent";

function Value(props) {
    return <div className="value">{props.value}</div>;
}

class SliderContainer extends Component {

    state = { value: 0 };

    handleChange = e => this.setState({value: e.detail});

    render() {
        return (
            <div className="slider">
                <SliderComponent onChange={this.handleChange} />
                <Value value={this.state.value} />
            </div>
        );
    }
}

export default SliderContainer

components/SliderContainer/SliderComponent.jsx :

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import SvgSlider from 'svg-slider';

class SliderComponent extends Component {

    handleChange = e => {
        if (this.props.onChange) this.props.onChange(e);
    };

    componentDidMount() {
        this.k = new SvgSlider(this.dom);
        this.dom.addEventListener("change", this.handleChange);
    }

    // Not really necessary, but will slightly improve the rendering performance.
    shouldComponentUpdate() {
        return this.k === null;
    }

    render() {
        return (
            <svg ref={elem => this.dom = elem} />
        );
    }
}

// https://reactjs.org/docs/typechecking-with-proptypes.html
SliderComponent.propTypes = {
    onChange: PropTypes.func
};

export default SliderComponent;

React App:

App.js :

import React, {Component} from 'react';
import './App.css';
import SliderContainer from "./components/SliderContainer/index";

class App extends Component {
    render() {
        return (
            <div>
                <SliderContainer />
            </div>
        );
    }
}

export default App;

App.css:

.slider {
    width: 40px;
}

.slider .value {
    text-align: center;
}

License

This project is licensed under the MIT License - see the LICENSE file for details