Wondering what’s next for npm?Check out our public roadmap! »

    range-slider-customizer

    1.0.2 • Public • Published

    Range Slider Customizer

    NPM

    npm i range-slider-customizer
    import range from 'range-slider-customizer'

    UNPKG

    <script src="https://unpkg.com/range-slider-customizer">

    Usage

    range.create(selector?,option)

    Examples

    Default Style

    default style

    range.create('.custom-slider')

    With Options

    custom-2 style

    range.create('.custom-slider2', {
      trackColor: '#008a25',
      progressColor: '#00d639',
      height: '10px',
      thumb: {
        background: '#01cb37',
        borderRadius: '0px',
        height: '20px',
        hover: {
          boxShadow: '0 0 0 10px #00d6396b',
        },
      },
    })

    custom-3 style

    range.create('.custom-slider3', {
      progressColor: 'red',
      trackColor: 'green',
      border: '1px solid black',
      thumb: {
        background: 'yellow',
        border: '1px solid black',
      },
    })

    custom-4 style

    range.create('.custom-slider4', {
      progressColor: '#ff8f8f',
      trackColor: 'red',
      thumb: {
        background: 'red',
        hover: {
          boxShadow: '0 0 0 20px #ff00006b',
        },
      },
    })

    custom-5 style

    range.create('.custom-slider5', {
      progressColor: '#eeff52',
      trackColor: '#e6ff00',
      height: '10px',
      border: '1px solid green',
      thumb: {
        background: '#8e9e00',
        height: '40px',
        borderRadius: '5px',
        border: '1px solid green',
        hover: {
          boxShadow: '0 0 0 20px #eeff52c4',
        },
      },
    })

    Install

    npm i range-slider-customizer

    DownloadsWeekly Downloads

    1

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    8.82 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar