Generic slugify Stimulus controller. Takes input text and outputs slugified version as you type to another input field.

slugify_controller.html

<div data-controller="slugify">
  
   <input data-slugify-target="input" data-action="input->slugify#inputToOutput" type="text">
  
   <input data-slugify-target="output" type="text">

</div>

slugify_controller.js

import { Controller } from 'stimulus'

const slugify = text =>
    text
        .toString()
        .normalize('NFD')
        .replace(/[\u0300-\u036f]/g, '')
        .toLowerCase()
        .trim()
        .replace(/\s+/g, '-')
        .replace(/[^\w-]+/g, '')
        .replace(/--+/g, '-')


export default class extends Controller {
    static get targets() {
        return ["input", "output"]
    }

    inputToOutput() {
        this.outputTarget.value = slugify(this.inputTarget.value)
    }
}