Updated TTL to use slider.

_locales/en/messages.json

@@ -1084,9 +1084,13 @@
     "description": "Title of the Message TTL setting"
   },
   "messageTTLSettingDescription": {
-    "message": "Time to live in hours (min: 12, max: 96)",
+    "message": "Time to live (how long the recipient will have to collect their messages)",
     "description": "Description of the time to live setting"
   },
+  "messageTTLSettingWarning": {
+    "message": "Warning! Lowering the TTL could result in messages being lost if the recipient doesn't collect them in time!",
+    "description": "Warning for the time to live setting"
+  },
   "notificationSettingsDialog": {
     "message": "When messages arrive, display notifications that reveal:",
     "description": "Explain the purpose of the notification settings"

js/views/settings_view.js

@@ -58,12 +58,17 @@
     },
     events: {
       change: 'change',
+      input: 'input',
     },
     change(e) {
       this.value = e.target.value;
       this.setFn(this.value);
       window.log.info('message-ttl-setting changed to', this.value);
     },
+    input(e) {
+      this.value = e.target.value;
+      this.$('label').html(`${this.value} Hours`);
+    },
     populate() {
       this.$('input').val(this.value);
     },
@@ -202,6 +207,7 @@
         readReceiptSettingDescription: i18n('readReceiptSettingDescription'),
         messageTTL: i18n('messageTTL'),
         messageTTLSettingDescription: i18n('messageTTLSettingDescription'),
+        messageTTLSettingWarning: i18n('messageTTLSettingWarning'),
         spellCheckHeader: i18n('spellCheck'),
         spellCheckDescription: i18n('spellCheckDescription'),
         blockedHeader: 'Blocked Users',

settings.html

@@ -114,8 +114,38 @@
     <hr>
     <div class='message-ttl-setting'>
       <h3>{{ messageTTL }}</h3>
-      <input name='message-ttl-setting' id='message-ttl-setting' type="number" min="12" max="96">
-      <label for='message-ttl-setting'>{{ messageTTLSettingDescription }}</label>
+      <div>{{ messageTTLSettingDescription }}</div>
+      <div id="warning">{{ messageTTLSettingWarning }}</div>
+      <div class='inputs'>
+        <input
+          name='message-ttl-setting'
+          id='message-ttl-setting'
+          type="range"
+          list="tickmarks"
+          min="12"
+          max="96"
+          step="6"
+          value="24"
+        >
+        <label for='message-ttl-setting'>24 Hours</label>
+        <datalist id="tickmarks">
+          <option value="12">
+          <option value="18">
+          <option value="24">
+          <option value="30">
+          <option value="36">
+          <option value="42">
+          <option value="48">
+          <option value="54">
+          <option value="60">
+          <option value="66">
+          <option value="72">
+          <option value="78">
+          <option value="84">
+          <option value="90">
+          <option value="96">
+        </datalist>
+      </div>
     </div>
     <hr>
     <div class='clear-data-settings'>

stylesheets/_settings.scss

@@ -90,4 +90,20 @@
       color: white;
     }
   }
+
+  .message-ttl-setting {
+    .inputs {
+      display: flex;
+      padding-top: 18px;
+    }
+
+    #warning {
+      padding-top: 12px;
+      font-weight: 300;
+      color: red;
+    }
+
+    input { flex: 1; }
+    label { padding-left: 12px; }
+  }
 }