--- a/src/widgets/Slice.js	Sun Nov 12 22:07:33 2017 +0100
+++ b/src/widgets/Slice.js	Wed Sep 04 17:32:50 2024 +0200
@@ -1,23 +1,24 @@
 /*
  The Slider Widget shows time position and allows seek
  */
+import sliceStyles from "./Slice.module.css";
 
-IriSP.Widgets.Slice = function(player, config) {
-    IriSP.Widgets.Widget.call(this, player, config);
+const Slice = function(ns) {
+    return class extends ns.Widgets.Widget {
+constructor(player, config) {
+    super(player, config);
     this.sliding = false;
 };
 
-IriSP.Widgets.Slice.prototype = new IriSP.Widgets.Widget();
-
-IriSP.Widgets.Slice.prototype.defaults = {
+static defaults = {
     show_arrow: false
 };
 
-IriSP.Widgets.Slice.prototype.template =
+static template =
     '<div class="Ldt-Slice"></div>'
     + '{{#show_arrow}}<div class="Ldt-Slice-Arrow"></div>{{/show_arrow}}';
 
-IriSP.Widgets.Slice.prototype.draw = function() {
+draw() {
     
     this.renderTemplate();
     
@@ -75,14 +76,18 @@
     });
 };
 
-IriSP.Widgets.Slice.prototype.setBounds = function(begin, end) {
+setBounds(begin, end) {
     this.$slider.slider("values", [ begin, end ]);
 };
 
-IriSP.Widgets.Slice.prototype.show = function() {
+show() {
     this.$slider.show();
 };
 
-IriSP.Widgets.Slice.prototype.hide = function() {
+hide() {
     this.$slider.hide();
 };
+
+    }}
+
+export { Slice, sliceStyles };