Ahmed Khalil awran5

1. Install

npm i prismjs
npm i -D @types/prismjs

2. Import

import React, { useEffect } from 'react'
import Prism from 'prismjs'

This originally was based on slider field

I've changed its structure to avoid loading of heavy jquery UI so its only used the basic HTML5 type range input

1. php Filter

function cmb2_render_range( $field, $field_escaped_value, $field_object_id, $field_object_type, $field_type_object ){

  $slider = $field_type_object->input( array(
    'type'  => 'range',

Copy this code to your project CSS file

/* Start Switch field */
.switch-field .cmb2-radio-list li {
	padding-right: 0 !important;
	margin: 0;
}

.switch-field .cmb2-radio-list input {


	function getRandomId() {
	return Array.from(window.crypto.getRandomValues(new Uint32Array(4)))
	.map((number) => number.toString(16))
	.join('-')
	}

	import React, { useEffect, useRef } from 'react';

	/**
	* Use setInterval with Hooks in a declarative way.
	*
	* @see https://stackoverflow.com/a/59274004/3723993
	* @see https://overreacted.io/making-setinterval-declarative-with-react-hooks/
	*/
	export function useInterval(
	callback: React.EffectCallback,

	// Some useful shorthanded JavaScript functions

	// select an element
	const select = e => document.querySelector(e)
	// Select multiple elements
	const selectAll = e => document.querySelectorAll(e)

	// Show DOM element
	const show = e => (e.style.display = '')
	// Hide DOM element

	[
	{
	"quote": "Be yourself; everyone else is already taken.",
	"author": "Oscar Wilde",
	"profession": "Irish poet",
	"topics": [
	"Inspirational",
	"Advice",
	"Humor"
	]

	{
	"encryptedData": "your-key"
	}