<p class="bx--truncation-middle">This is a really long string that needs to be truncated</p>


<div class="bx--form">
	<div class="bx--form-item">
		<div data-numberinput class="bx--number">
			<label for="number-input-1" class="bx--label">Start</label>
			<input id="number-input-1" class="start" type="number" min="0" max="100" value="10">
			<div class="bx--number__controls">
				<button aria-label="increase number input" class="bx--number__control-btn up-icon">
						<svg width="10" height="5" viewBox="0 0 10 5">
							<path d="M0 5L5 .002 10 5z" fill-rule="evenodd" />
						</svg>
				</button>
				<button aria-label="decrease number input" class="bx--number__control-btn down-icon">
						<svg width="10" height="5" viewBox="0 0 10 5">
							<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
						</svg>
				</button>
			</div>
		</div>

		<div data-numberinput class="bx--number">
			<label for="number-input-2" class="bx--label">End</label>
			<input id="number-input-2" class="end" type="number" min="0" max="100" value="16">
			<div class="bx--number__controls">
				<button aria-label="increase number input" class="bx--number__control-btn up-icon">
						<svg width="10" height="5" viewBox="0 0 10 5">
							<path d="M0 5L5 .002 10 5z" fill-rule="evenodd" />
						</svg>
				</button>
				<button aria-label="decrease number input" class="bx--number__control-btn down-icon">
						<svg width="10" height="5" viewBox="0 0 10 5">
							<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
						</svg>
				</button>
			</div>
		</div>
	</div>
</div>

body {
  padding: 2rem 3%;
}

.bx--form {
	margin-top: 20px;
	display: flex;
	max-width: 200px;
}

.bx--form-item {
	flex-direction: row;
}

const sentence = document.querySelector('.bx--truncation-middle'); // Sentence to truncate
const str = sentence.textContent;
let start = document.querySelector('.start').value; // # of letters to retain at the start
let end = document.querySelector('.end').value; // # of letters to retain at the end

//// How to truncate
const truncate = (str, start, end) => {
	let seperator = '...';
	return str.substr(0, start) + seperator + str.substr(str.length - end)
}

const newStr = truncate(sentence.textContent, start, end);
sentence.textContent = newStr;


//// Stuff mainly used for the example
const numberInputs = document.querySelectorAll('[data-numberinput]')
const updateTrunc = (evt) => {
	if (evt.target.classList.contains('start')) {
		start = evt.target.value;
	} else {
		end = evt.target.value;
	}
	
	const newStr = truncate(str, start, end);
	document.querySelector('.bx--truncation-middle').textContent = newStr;
}

numberInputs.forEach((input) => {
	console.log(input)
	input.addEventListener('change', updateTrunc)
})